antd table排序 vue_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

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功能，這個功能可以實作對每一行的資料進行定點編輯，但是遇到一個坑，如果我編輯态也是做成一個子元件的話，就需要先在子元件通過props取到父元件傳來的值data，但我們都知道子元件是沒有權利更改父元件傳過來的值，這時候我們需要定義一個新的變量newdata，通過深拷貝data給newdata指派，但細看antd文檔就知道，antd-table裡的資料需要每一條資料都有一個屬于自己的key值，然後我們的data并沒有key值，此時就需要周遊newdata，給每個對象就push一個key值。然後在newdata上進行操作。1

2

3

4this.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

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}`,

})

}