vue + element 表格以及表单数据动态绑定 -- 表格数据动态绑定

在我们开发的过程中，会遇到很多在同一个表格或者表单渲染不同数据量的场景，希望下面的例子可以帮到你，如果有用记得点赞奥

动态表格渲染

<el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        v-for="item in tableHead"
        :label="item.value"
        :property="item.key">
        <template slot-scope="scope">
          <p>{{ scope.row[scope.column.property].value }}</p>
        </template>
      </el-table-column>
</el-table>

在上图代码中，需要注意的的有三点：

  a. :property 相当于在原型链中绑定了一个key  ->  头部数据和身体数据是否能正确对应渲染 !import

//表头数据 - 仅参考
tableHead = [{
   key:"name",
   value:"张三"
},{
   key:"address",
   value:"北京"
},{
   key:"age",
   value:"18"
}]

      个人的思路（欢迎大神改进）：这里的key是非常重要的一个值，<el-table-colum/> 通过 “tableHead” 绑定了表头数据，其中<template/>将 tableData 中的数据通过key绑定

  b. slot-scope 通过v-bind将数据绑定到slot中，方便后续调用

  c: scope.row[scope.column.property].value   

     有了明确的 key 之后呢，咱们就可以开始渲染表格数据了， 咱们将 scope.row[scope.column.property].value 分开来讲解：

       · [scope.column.property]  =>  获取我们刚才在 property 定义的key

       · scope.row[scope.column.property]  => scope.row[key]  获取 tableData 中对应 key 值的整条数据

       · scope.row[scope.column.property] .value 获取这整条数据中的值 （也不一定是value，具体看数据的返回值是啥）

！！！申明：这仅仅是针对部分数据格式的渲染方式，仅供大家参考，整体都是这个思路，不喜勿喷哈

 

欢迎关注我的公众号：码上学习鸭