2019-07-05 | UNLOCK

antd of Vue 之table组件踩坑记

需求:页面里有个table,点击编辑可以编辑该table,保存数据并展示到页面上来

第一种方法就是把编辑态的table做成子组件(且叫editeTable),通过v-show判断是否进入编辑态来显示隐藏。先仿造原本父组件(且叫fatherTable),做了一些基本的table样式,子组件editeTable里的tr每格皆为antd-Form表单输入框,接收fatherTable的data数据,用Form的API——validateFields校验并获取输入域的值,进行编辑,用户编辑完后,点保存,然后editeTable里的数据通过$emit函数showPage()传递给fatherTable,覆盖掉fatherTable原本的data数据,这样即可实现。以下为部分代码(不全):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 父组件中引用
<test-edit
v-show="this.editeType"
:editeData="entityinfo"
:editeType="editeType"
@showPage="editeShow">
</test-edit>

// 子组件js
export default {
props: {
editeData: Object,
editeType: Boolean
},
mounted() {
this.initDate();
},
watch: {
editeType: function() {
// console.log(this.editeType);
if(this.editeType){
setTimeout(()=>{
this.initDate();
},200)
// this.initDate();
// console.log(111,this.editeData)
}
else {
this.form.setFieldsValue(this.entityinfo);
}
},
methods: {
handleSearch(e) {
e.preventDefault();
this.form.validateFields((error, values) => {
// console.log('error', error);
// console.log('Received values of form: ', values);
// console.log(values);
this.$emit('showPage', values)
});
this.from.validateFields();
}
}

另一种方法是用antd-table自带的编辑edite功能,这个功能可以实现对每一行的数据进行定点编辑,但是遇到一个坑,如果我编辑态也是做成一个子组件的话,就需要先在子组件通过props取到父组件传来的值data,但我们都知道子组件是没有权利更改父组件传过来的值,这时候我们需要定义一个新的变量newdata,通过深拷贝data给newdata赋值,但细看antd文档就知道,antd-table里的数据需要每一条数据都有一个属于自己的key值,然后我们的data并没有key值,此时就需要遍历newdata,给每个对象就push一个key值。然后在newdata上进行操作。

1
2
3
4
this.newData = [...this.data] || [];
this.newData.forEach((item,index) => {
item.key = index;
}

而且要注意一点就是,antd-table的dataIndex和scopedSlots必须为同名,否则不生效,这是第二个坑,所以newdata在初始化数据要注意。之后编辑获取到新的newdata,便可以通过$emit给父组件传值,得到编辑后的效果。

以下为antd-table的部分实例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const columns = [{
title: 'name',
dataIndex: 'name',
width: '25%',
scopedSlots: { customRender: 'name' },
}, {
title: 'operation',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
}]

const data = []
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
})
}

评论加载中

上一页 下一页