栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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



 
 
  
 

 
  
   
    
   
  
 

 

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

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

 

 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表单及动态生成表格的行和列,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/75649.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号