vue+element创建动态的form表单及动态生成表格的行和列


Posted in Javascript onMay 20, 2019

  动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.

最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用

<el-form size="mini" class="lj-form lj-form-s1">
       <div v-for="(item,i) in table.customerList" :key="i">
        <!-- 0单行文本 -->
        <el-form-item
         :label="item.field_title + ': '"
         v-if="item.field_type == '0' && item.is_show == '1'"
        >
         <el-input v-model="item.value" :placeholder="item.placeholder"></el-input>
        </el-form-item>
       <!-- 3下拉菜单 -->
        <el-form-item
         :label="item.field_title + ': '"
         v-if="item.field_type == '3' && item.is_show == '1'"
        >
         <el-select v-model="item.value" :placeholder="item.placeholder">
          <span v-for="(item1,i) in item.field_value" :key="i">
           <el-option :label="item1" :value="item1"></el-option>
          </span>
         </el-select>
        </el-form-item>
       </div>
 </el-form>

动态生成表格的行和列,主要是要求后端返回的数据格式,根据数据来动态渲染

注意点:这里两个数组 :    表格字段数据: titleData: [],   表格详细数据: tables: [], 数据通过字段来查找/渲染成表格的

<template>
  <div class="boxShadow">
   <div style="margin-top: 20px"> 
    <el-table
     :data="tables"
     ref="multipleTable"
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change='selectArInfo'>
     <el-table-column type="selection" width="45px"></el-table-column>
     <el-table-column label="序号" width="62px" type="index">
     </el-table-column>
     <template v-for='(col) in titleData'>
      <el-table-column
       sortable
       :show-overflow-tooltip="true"
       :prop="col.dataItem"
       :label="col.dataName"
       :key="col.dataItem"
       width="124px">
      </el-table-column>
     </template>
     <el-table-column label="操作" width="80" align="center">
      <template slot-scope="scope">
       <el-button size="mini" class="del-com" @click="delTabColOne()" ><i class="iconfont icon-shanchu"></i></el-button>
      </template>
     </el-table-column>
    </el-table>
   </div>
  </div>
 </template>

 data () {
    return {
     tables: [{
      xiaoxue: '福兰',
      chuzhong: '加芳',
      gaozhong: '蒲庙',
      daxue: '西安',
      yanjiusheng: '西安',
      shangban: '北京'
     }, {
      xiaoxue: '南坊',
      chuzhong: '礼泉',
      gaozhong: '礼泉',
      daxue: '西安',
      yanjiusheng: '西安',
      shangban: '南坊'
     }, ],
     titleData: [{
      dataItem: 'xiaoxue',
      dataName: '小学'
     }, {
      dataItem: 'chuzhong',
      dataName: '初中'
     }, {
      dataItem: 'gaozhong',
      dataName: '高中'
     }, {
      dataItem: 'daxue',
      dataName: '大学'
     }, {
      dataItem: 'yanjiusheng',
      dataName: '研究生'
     }, {
      dataItem: 'shangban',
      dataName: '上班'
     }]
    }

总结

以上所述是小编给大家介绍的vue+element创建动态的form表单及动态生成表格的行和列,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
Node 搭建一个静态资源服务器的实现
May 20 #Javascript
vue+element实现打印页面功能
May 20 #Javascript
vue+element实现表单校验功能
May 20 #Javascript
javascript的this关键字详解
May 20 #Javascript
小程序实现新用户判断并跳转激活的方法
May 20 #Javascript
node实现socket链接与GPRS进行通信的方法
May 20 #Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 #Javascript
You might like
网站用php实现paypal整合方法
2010/11/28 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
python 高阶函数简单介绍
2021/02/19 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
年级组长自我鉴定
2014/02/22 职场文书
2014年文秘工作总结
2014/11/25 职场文书
战马观后感
2015/06/08 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
python 离散点图画法的实现
2022/04/01 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技