vue + element 表格以及表单数据动态绑定 -- 表格数据动态绑定
在我们开发的过程中,会遇到很多在同一个表格或者表单渲染不同数据量的场景,希望下面的例子可以帮到你,如果有用记得点赞奥动态表格渲染<el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><
在我们开发的过程中,会遇到很多在同一个表格或者表单渲染不同数据量的场景,希望下面的例子可以帮到你,如果有用记得点赞奥
动态表格渲染
<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,具体看数据的返回值是啥)
!!!申明:这仅仅是针对部分数据格式的渲染方式,仅供大家参考,整体都是这个思路,不喜勿喷哈
欢迎关注我的公众号:码上学习鸭
更多推荐
所有评论(0)