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

动态表格渲染

<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,具体看数据的返回值是啥)

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

 

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

Logo

前往低代码交流专区

更多推荐