antdesign树形表格自定义展开图标

 

 

<template>
  <a-table :columns="columns" :data-source="data" rowKey="id" :defaultExpandAllRows="true">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'action'">
        <!-- 添加 -->
        <span><plus-circle-outlined class="add" /></span>
      </template>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <!-- 添加 -->
        <span><plus-circle-outlined class="add" /></span>
        <!-- 编辑 -->
        <span><form-outlined class="edit" /></span>
        <!-- 删除 -->
        <span><minus-circle-outlined class="delete" /></span>
      </template>
    </template>
    <!-- 自定义展开图标 -->
    <template #expandIcon="props">
      <caret-right-outlined v-if="!props.expanded && props.record.children"
        @click="clickIcon(props.record, props.onExpand)" />
      <caret-down-outlined v-if="props.expanded && props.record.children"
        @click="clickIcon(props.record, props.onExpand)" />
    </template>
  </a-table>
</template>
<script setup>
import { ref, reactive } from 'vue';
import Icon, { PlusCircleOutlined, FormOutlined, MinusCircleOutlined, CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '顺序',
    dataIndex: 'sort',
    key: 'sort',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: '15%'
  },
];
const data = [
  {
    id: 1,
    name: 'John Brown sr.',
    sort: 1,
    children: [
      {
        id: 11,
        name: 'John Brown',
        sort: 1
      },
      {
        id: 12,
        name: 'John Brown jr.',
        sort: 2,
        children: [
          {
            id: 121,
            name: 'Jimmy Brown',
            sort: 1,
          },
        ],
      },
      {
        id: 13,
        name: 'Jim Green sr.',
        sort: 3,
        children: [
          {
            id: 131,
            name: 'Jim Green',
            sort: 1,
            children: [
              {
                id: 1311,
                name: 'Jim Green jr.',
                sort: 1
              },
              {
                id: 1312,
                name: 'Jimmy Green sr.',
                sort: 2
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: 'Joe Black',
    sort: 2
  },
];
function clickIcon (record, onExpand) {
  onExpand(record)
}
</script>
<style scoped>
.add {
  @apply text-base;
  color: #52c41a
}

.edit {
  @apply text-base mr-2 ml-2;
  color: #0000009c
}

.delete {
  @apply text-base;
  color: #ff7875
}
</style>