vue antd 表格树如何展开_antd+table

要使用 Ant Design Vue 的表格树组件，您需要先安装和导入 Table 和 TreeSelect 组件。

在表格中，您需要使用 `customExpandIcon` 属性来自定义展开/折叠图标，并使用 `customRow` 属性来自定义行的渲染。

以下是一个示例代码：

<template>
  <a-table :columns="columns" :data-source="data" :custom-row="customRow" :custom-expand-icon="customExpandIcon">
    <template slot="name" slot-scope="{ record }">
      {{ record.name }}
    </template>
  </a-table>
</template>

<script>
import { Table, TreeSelect } from 'ant-design-vue';

export default {
  components: {
    Table,
    TreeSelect,
  },
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      data: [
        {
          key: '1',
          name: 'Parent 1',
          age: 30,
          address: 'New York No. 1 Lake Park',
          children: [
            {
              key: '1-1',
              name: 'Child 1-1',
              age: 12,
              address: 'New York No. 2 Lake Park',
            },
            {
              key: '1-2',
              name: 'Child 1-2',
              age: 13,
              address: 'New York No. 3 Lake Park',
            },
          ],
        },
        {
          key: '2',
          name: 'Parent 2',
          age: 32,
          address: 'London No. 1 Lake Park',
          children: [
            {
              key: '2-1',
              name: 'Child 2-1',
              age: 11,
              address: 'London No. 2 Lake Park',
            },
            {
              key: '2-2',
              name: 'Child 2-2',
              age: 16,
              address: 'London No. 3 Lake Park',
            },
          ],
        },
      ],
    };
  },
  methods: {
    customExpandIcon({ record, onExpand }) {
      if (record.children) {
        return (
          <a onClick={onExpand}>
            {record._expanded ? <a-icon type="minus-square" /> : <a-icon type="plus-square" />}
          </a>
        );
      }
      return null;
    },
    customRow(record, index, indent, expanded) {
      return {
        class: `custom-row-${record.key}`,
        on: {
          click: () => {
            console.log(record);
          },
        },
      };
    },
  },
};
</script>

在上面的代码中，您可以看到我们自定义了展开/折叠图标和行的渲染，以及使用了插槽 `scopedSlots` 来渲染名称列。您还可以根据您的需求来添加其他自定义的组件或插槽。