a-table如何自定义图标并在指定位置控制展开缩进

1. 首先我从接口拿到的数据是用id来作为唯一标识的，而a-table是用key来作为唯一标识的，所以需要用到row-key这个属性来进行修改

row-key="id"

<a-table
  :columns="columns"
  :data-source="data"
  row-key="id"
  class="dictonaryManage"
  :expanded-row-keys="expandedRowKeys"
>
</a-table>

2. 在指定位置使用

#bodyCell

<template #bodyCell="{ column, record }">
  <template v-if="column.key === 'class'">
    <a @click="toggleExpand(record.id)" class="custom-expand-icon">
      <template v-if="expandedRowKeys.includes(record.id)"><DownOutlined /></template>
      <template v-else> <RightOutlined /></template>
    </a>
  </template>
</template>

3. 用expandedRowKeys(v-model)控制展开的行

:expanded-row-keys="expandedRowKeys"

import { RightOutlined, DownOutlined } from "@ant-design/icons-vue";
const expandedRowKeys = ref<number[]>([]);
function toggleExpand(id: number) {
  const index = expandedRowKeys.value.indexOf(id);
  if (index > -1) {
    expandedRowKeys.value.splice(index, 1);
  } else {
    expandedRowKeys.value.push(id);
  }
}
function handleExpand(expanded: boolean, record: any) {
  toggleExpand(record.id);
}

4. 把原本默认的图标隐藏

.ant-table-row-expand-icon {

  display: none;

}