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

 更新时间:2019年05月20日 17:03:13   作者:浚琦  
这篇文章主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

相关文章

  • Vue引入jQuery的方法和配置教程

    Vue引入jQuery的方法和配置教程

    虽然Vue.js作为一个现代化的前端框架,鼓励使用其自身的响应式机制来处理DOM操作,但在某些情况下,尤其是在需要维护旧系统的项目中,可能会遇到需要引入jQuery的情况,本文将详细讲解如何在Vue项目中引入jQuery,需要的朋友可以参考下
    2024-09-09
  • 通过GASP让vue实现动态效果实例代码详解

    通过GASP让vue实现动态效果实例代码详解

    GASP是一个JavaScript动画库,它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起,来创造一个高内聚的流畅动画序列。这篇文章主要介绍了通过GASP让vue实现动态效果,需要的朋友可以参考下
    2019-11-11
  • vue中添加语音播报功能的实现

    vue中添加语音播报功能的实现

    本文主要介绍了vue中添加语音播报功能的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue如何给element-ui中的el-tabs动态设置label属性

    vue如何给element-ui中的el-tabs动态设置label属性

    这篇文章主要介绍了vue如何给element-ui中的el-tabs动态设置label属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue之父组件向子组件传值并改变子组件的样式

    vue之父组件向子组件传值并改变子组件的样式

    这篇文章主要介绍了vue之父组件向子组件传值并改变子组件的样式,需要的朋友可以参考下
    2022-12-12
  • fullcalendar日程管理插件月份切换回调处理方案

    fullcalendar日程管理插件月份切换回调处理方案

    这篇文章主要为大家介绍了fullcalendar日程管理插件月份切换回调处理的方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-03-03
  • ElementUI日期选择器时间选择范围限制的实现

    ElementUI日期选择器时间选择范围限制的实现

    在日常开发中,我们会遇到一些情况,限制日期的范围的选择,本文就详细的介绍了ElementUI日期选择器时间选择范围限制的实现,文中通过示例代码介绍的非常详细,感兴趣的可以了解一下
    2022-04-04
  • Vue中实现表单地区选择与级联联动示例详解

    Vue中实现表单地区选择与级联联动示例详解

    这篇文章主要为大家介绍了Vue中实现表单地区选择与级联联动示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • elementui之el-table如何通过v-if控制按钮显示与隐藏

    elementui之el-table如何通过v-if控制按钮显示与隐藏

    这篇文章主要介绍了elementui之el-table如何通过v-if控制按钮显示与隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue修改项目启动端口号方法

    Vue修改项目启动端口号方法

    今天小编就为大家分享一篇Vue修改项目启动端口号方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论