ANTD-Vue 可编辑table(v-model配合table使用)_antd vue table编辑

<template>
  <div class="newDTable">
    <h2>ANTD-Vue table配合v-model使用</h2>
    <!-- 
             属性作用
             columns       //表头
             data-source   //数据
             slot          //插槽名
             slot-scope    //传递的参数
    -->
    <a-table :columns="columns" :data-source="data">
      <span slot="name" slot-scope="name, record, index">
        <!-- 
          slot-scope="name, record, index"
          name表示本项内容对应的字段值value，record的值是object，表示的是这一行数据的全部内容，index表示当行索引
         -->
        <!-- 
            此时v-model绑定data[index].name的是对应的数据,实现双向绑定
         -->
        <input type="text" v-model="data[index].name" />
      </span>
      <span slot="age" slot-scope="age, record, index">
        <input type="text" v-model="data[index].age" />
      </span>
      <span slot="address" slot-scope="age, record, index">
        <input type="text" v-model="data[index].address" />
      </span>
      <span slot="tags" slot-scope="tags, record, index">
        <input type="text" v-model="data[index].tags" />
      </span>
      <span slot="action" slot-scope="action, record, index">
        <button @click="clickChangeInp">点击查看改变后的数据</button>
      </span>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    title: "name",
    scopedSlots: { customRender: "name" }, //使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: 'XXX'}
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" },
  },
  {
    title: "Action",
    key: "action",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "newDTable",
  data() {
    return {
      data: [
        {
          key: "1",
          name: "",
          age: "",
          address: "",
          tags: "",
        },
        {
          key: "2",
          name: "",
          age: "",
          address: "",
          tags: "",
        },
      ],
      columns,
    };
  },
  methods: {
    clickChangeInp() {
      console.log(this.data, "改变后的数据");
    },
  },
};
</script>
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

控制台效果