Ant Design Vue a-table 组件来创建表格，在表头使用 slot 插槽来自定义表头的列

在 Ant Design Vue 中，可以使用 a-table 组件来创建表格，并且可以使用 expand-row 属性来自定义展开/折叠行。为了在表头中添加一个自定义的“ ”按钮，可以在表头中使用 slot 插槽来自定义表头的列。

以下是一个示例代码，演示如何在 Ant Design Vue 中自定义表头为“ ”按钮：

1.  
   <template>
2.  
   <a-table :columns="columns" :data-source="data" :expand-row-keys="expandRowKeys" :default-expand-all="true">
3.  
   <template slot="name" slot-scope="scope">
4.  
   <span v-if="!scope.row.expanded">{{ scope.row.index 1 }}</span>
5.  
   <span v-else>
6.  
   <i class="anticon anticon-down" @click="toggleExpand(scope.row)"></i>
7.  
   {{ scope.row.index 1 }}
8.  
   </span>
9.  
   </template>
10.  
    <template slot="operation" slot-scope="scope">
11.  
    <span v-if="!scope.row.expanded">
12.  
    <i class="anticon anticon-edit" @click="edit(scope.row)"></i>
13.  
    <i class="anticon anticon-delete" @click="remove(scope.row)"></i>
14.  
    </span>
15.  
    <span v-else>
16.  
    <i class="anticon anticon-close" @click="toggleExpand(scope.row)"></i>
17.  
    </span>
18.  
    </template>
19.  
    </a-table>
20.  
    </template>
21.  
     
22.  
    <script>
23.  
    export default {
24.  
    data() {
25.  
    return {
26.  
    columns: [
27.  
    {
28.  
    title: 'Name',
29.  
    dataIndex: 'name',
30.  
    key: 'name',
31.  
    },
32.  
    {
33.  
    title: 'Operation',
34.  
    dataIndex: 'operation',
35.  
    key: 'operation',
36.  
    scopedSlots: { default: 'operation' },
37.  
    },
38.  
    ],
39.  
    data: [
40.  
    {
41.  
    id: 1,
42.  
    name: 'John Doe',
43.  
    operation: 'Edit',
44.  
    },
45.  
    {
46.  
    id: 2,
47.  
    name: 'Jane Smith',
48.  
    operation: 'Delete',
49.  
    },
50.  
    ],
51.  
    expandRowKeys: [],
52.  
    };
53.  
    },
54.  
    methods: {
55.  
    toggleExpand(row) {
56.  
    const index = this.expandRowKeys.indexOf(row.id);
57.  
    if (index === -1) {
58.  
    this.expandRowKeys.push(row.id);
59.  
    } else {
60.  
    this.expandRowKeys.splice(index, 1);
61.  
    }
62.  
    },
63.  
    edit(row) {
64.  
    alert(`Edit ${row.name}`);
65.  
    },
66.  
    remove(row) {
67.  
    alert(`Delete ${row.name}`);
68.  
    },
69.  
    },
70.  
    };
71.  
    </script>

在这个示例代码中，我们在表头中定义了两列：姓名和操作。对于“操作”列，我们使用了 scopedSlots 来定义一个名为 operation 的插槽，用于自定义该列的内容。在插槽中，我们根据当前行的展开状态来显示不同的按钮。如果当前行未展开，则显示“Edit”和“Delete”按钮；如果当前行已展开，则显示“Close”按钮。我们还定义了一个 toggleExpand 方法来切换行的展开状态。

这篇好文章是转载于：学新通技术网