antd table排序 vue_antd of Vue 之table组件踩坑记
需求：頁(yè)面里有個(gè)table，點(diǎn)擊編輯可以編輯該table，保存數(shù)據(jù)并展示到頁(yè)面上來(lái)
第一種方法就是把編輯態(tài)的table做成子組件(且叫editeTable)，通過(guò)v-show判斷是否進(jìn)入編輯態(tài)來(lái)顯示隱藏。先仿造原本父組件(且叫fatherTable)，做了一些基本的table樣式，子組件editeTable里的tr每格皆為antd-Form表單輸入框，接收f(shuō)atherTable的data數(shù)據(jù)，用Form的API——validateFields校驗(yàn)并獲取輸入域的值，進(jìn)行編輯，用戶編輯完后，點(diǎn)保存，然后editeTable里的數(shù)據(jù)通過(guò)$emit函數(shù)showPage()傳遞給fatherTable，覆蓋掉fatherTable原本的data數(shù)據(jù)，這樣即可實(shí)現(xiàn)。以下為部分代碼(不全)：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
v-show="this.editeType"
:editeData="entityinfo"
:editeType="editeType"
@showPage="editeShow">
// 子組件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功能，這個(gè)功能可以實(shí)現(xiàn)對(duì)每一行的數(shù)據(jù)進(jìn)行定點(diǎn)編輯，但是遇到一個(gè)坑，如果我編輯態(tài)也是做成一個(gè)子組件的話，就需要先在子組件通過(guò)props取到父組件傳來(lái)的值data，但我們都知道子組件是沒(méi)有權(quán)利更改父組件傳過(guò)來(lái)的值，這時(shí)候我們需要定義一個(gè)新的變量newdata，通過(guò)深拷貝data給newdata賦值，但細(xì)看antd文檔就知道，antd-table里的數(shù)據(jù)需要每一條數(shù)據(jù)都有一個(gè)屬于自己的key值，然后我們的data并沒(méi)有key值，此時(shí)就需要遍歷newdata，給每個(gè)對(duì)象就push一個(gè)key值。然后在newdata上進(jìn)行操作。1
2
3
4this.newData = [...this.data] || [];
this.newData.forEach((item,index) => {
item.key = index;
}
而且要注意一點(diǎn)就是，antd-table的dataIndex和scopedSlots必須為同名，否則不生效，這是第二個(gè)坑，所以newdata在初始化數(shù)據(jù)要注意。之后編輯獲取到新的newdata，便可以通過(guò)$emit給父組件傳值，得到編輯后的效果。
以下為antd-table的部分實(shí)例代碼：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const 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}`,
})
}
總結(jié)
以上是生活随笔為你收集整理的antd table排序 vue_antd of Vue 之table组件踩坑记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： swiper鼠标hover停止自动轮播_
- 下一篇： Vue 数字时钟