Open
Description
重现步骤
- 使用
extend-table
展示带复表头的数据,并在children
中使用一个data
的属性; - 在适当的时机改变该属性值;
- 错误结果:改变属性值后表格的列将会丢失;
- 预期:改变之后与该属性无关的列不受影响;
重现最小示例:
使用文档中的elem-table
示例,在data
中添加simple
属性,点击删除
按钮时修改simple
的值,点击后表格的column列将丢失。
重现示例代码
<script> export default { data() { return { loading: false, data: [], simple: false, // <== bug
};
},
computed: {
columns() {
return [{
label: '编号',
type: 'index',
prop: 'index',
width: 80,
}, {
label: '姓名',
prop: 'name',
render: (h) => h('button', {
on: {
click: () => {
this.simple = !this.simple;
console.log('click');
},
},
}, '删除'),
}, {
children: [{
headerAlign: 'right',
headerSlotRender: this.headerSlotRender,
children: [this.simple ? {
label: '备注前',
prop: 'item.remark2',
} : {
label: '备注1',
prop: 'item.remark1',
}, {
label: '备注',
prop: 'item.remark',
type: 'input',
attrs: {
type: 'textarea',
},
listeners: {
input: (rowIndex, val) => {
console.warn(rowIndex, val);
},
},
}],
}, {
headerSlotRender: this.headerSlotRender,
prop: 'item.age',
render: (h, p) => h('h2', {
style: 'overflow: hidden;text-overflow: ellipsis;',
}, p.row.name),
}],
}];
},
},
mounted() {
this.fetchMockData();
},
methods: {
onDataChange() {
console.warn(this.data);
},
headerSlotRender(h) {
return h('i', { class: 'el-icon-time' });
},
fetchMockData() {
this.loading = true;
setTimeout(() => {
this.data = [{
id: 1,
name: '',
item: {
age: 18,
remark: '',
},
}, {
id: 2,
name: 'ccsdaskdhajksbdajksdbakdbksadbsjdbkda',
item: {
age: 19,
remark: '备注',
},
}];
this.loading = false;
}, 300);
},
},
};
</script>
Metadata
Metadata
Assignees
Labels
No labels