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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
代码详解django中数据库设置
2019/01/28 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
网络技术专业推荐信
2014/02/20 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python