elementui 动态表单问题

最近碰到一个问题，就是在 vuejs 项目中搭配 elementui 组件库中的 el-form 动态表单问题，踩了一点坑，在此记录

重点在第二层循环 prop 绑定的问题, 'propertyGroup' + index + 'groupProperty' + j + 'value' ,是第一层和第二层的数组和 index 都要加上，要不然验证加不上。

<template>

  <div class="oDiv">

    <div style="margin-top: 20px">

      <el-button @click="delArray()" type="danger">批量删除</el-button>

      <el-button @click="toggleSelection()">取消选择</el-button>

    </div>

    <el-table

      :data="tableData"

      ref="multipleTable"

      style="width: 100%"

      max-height="250"

      @selection-change="handleSelectionChange">

      <el-table-column

        type="selection"

        width="55">

      </el-table-column>

      <el-table-column

        fixed

        prop="date"

        label="日期"

        width="150">

      </el-table-column>

      <el-table-column

        prop="name"

        label="姓名"

        width="120">

      </el-table-column>

      <el-table-column

        prop="province"

        label="省份"

        width="120">

      </el-table-column>

      <el-table-column

        prop="city"

        label="市区"

        width="120">

      </el-table-column>

      <el-table-column

        prop="address"

        label="地址"

        width="300">

      </el-table-column>

      <el-table-column

        prop="zip"

        label="邮编"

        width="120">

      </el-table-column>

      <el-table-column

        fixed="right"

        label=" *** 作"

        width="120">

        <template slot-scope="scope">

          <el-button

            @clicknativeprevent="deleteRow(scope$index, tableData)"

            type="text"

            size="small">

            移除

          </el-button>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  data () {

    return {

      tableDataAmount: [],

      tableData: [{

        date: '2016-05-03',

        name: '王小虎1',

        province: '上海',

        city: '普陀区',

        address: '上海市普陀区金沙江路 1518 弄',

        zip: 200333

      }, {

        date: '2016-05-02',

        name: '王小虎2',

        province: '上海',

        city: '普陀区',

        address: '上海市普陀区金沙江路 1518 弄',

        zip: 200333

      }, {

        date: '2016-05-04',

        name: '王小虎3',

        province: '上海',

        city: '普陀区',

        address: '上海市普陀区金沙江路 1518 弄',

        zip: 200333

      }]

    }

  },

  methods: {

    deleteRow (index, rows) {

      rowssplice(index, 1)

    },

    // 选择事件 得到选中的数据

    handleSelectionChange (data) {

      thistableDataAmount = data

    },

    // 批量清除

    delArray () {

      var that = this

      // 拿到选中的数据；

      var val = thistableDataAmount

      // 如果选中数据存在

      if (val) {

        // 将选中数据遍历

        valforEach(function (item, index) {

          // 遍历源数据

          thattableDataforEach(function (itemI, indexI) {

            // 如果选中数据跟元数据某一条标识相等，删除对应的源数据

            if (itemname === itemIname) {

              thattableDatasplice(indexI, 1)

            }

          })

        })

      }

      // 清除选中状态

      this$refsmultipleTableclearSelection()

    }

  }

}

</script>

用的最麻烦的方式获取到最终树形图的数据，原理是通过改变属性图真实数据，过程就是利用递归循环查找被点击的dataid与数据中哪个对象id相等来进行判断与递归。包括增删改都是利用这个方法，没找到框架提供的api有关于获取最终数据的参数。。。打印出来的store一直是原始数据。可能功能还不太完善吧，用个框架这个麻烦！

以上就是关于elementui 动态表单问题全部的内容，包括:elementui 动态表单问题、element实现table的批量删除、关于Vue elementui Tree组件自定义编辑删除后值怎么取等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！