本文介绍如何利用iview table的slot-scope功能实现自定义列，创建一个可编辑的表格。通过在columns中声明slot，并在Table组件内使用slot-scope，可以获取到当前行的数据进行编辑。示例包括姓名、年龄、出生日期和地址等字段的编辑，同时提供了保存和取消操作。示例代码展示了数据的双向绑定和编辑功能。
slot-scope
从 3.2.0 版本开始支持 slot-scope 写法。
在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope。
slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。
示例可编辑表格
{ { row.name }}
{ { row.age }}
{ { getBirthday(row.birthday) }}
{ { row.address }}
保存
取消
操作
export default {
data () {
return {
columns: [
{
title: '姓名',
slot: 'name'
},
{
title: '年龄',
slot: 'age'
},
{
title: '出生日期',
slot: 'birthday'
},
{
title: '地址',
slot: 'address'
},
{
title: '
最低0.47元/天 解锁文章
扫一扫
1361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
