没有合并前的数据展示
合并后展示 合并后我的最后一行数前进了一格
0改为1
const pageData = [{
"a": "这是A1",
"b": "这是B1"
},
{
"a": "这是A2",
"b": "这是B2"
},
{
"a": "这是A3",
"b": "这是B3"
},
{
"a": "这是A4",
"b": "这是B4"
}
]
const tableColumns = [{
"id": "1",
"prop": "a",
"label": "A"
}, {
"id": "2",
"prop": "b",
"label": "B"
}, ]
这里其实显示的内容已经是可以全部显示了,在我们想要编辑那就是item作为文本形式和输入框的切换,首先要实现输入框的加载,解决单个单元格的内容是怎么加载的是关键。
如何在这里的基础上获取到每个单元格的组件呢,tablle里添加占位符,获取到row,打印出来,查看结构,发现row[item.prop]
是这一行这一列的意思,因为table中这样写。
<template #default="{row,column}">
<el-input v-model="row[item.prop]"></el-input>
<span>{{row[item.prop]}}</span>
</template>