antd Vue 树形表格(a-table) 展开图标列设置 与自定义展开图标

设置展开列位置:添加属性 :expandIconColumnIndex="number" number为索引

<a-table
  v-if="state.refreshTable"
  :columns="state.columns"
  :data-source="state.tableDataList"
  :scroll="{ x: '100%' }"
  :pagination="false"
  @change="onChange"
  :row-key="(record) => record.id"
  :loading="state.loading"
  :expandable="{ defaultExpandAllRows: false, expandRowByClick: false }"
  :defaultExpandAllRows="state.isExpandAll"
  @resizeColumn="handleResizeColumn"
  :expandIconColumnIndex="state.treeIconIndex"
>
  <!--  自定义展开折叠图标  -->
  <template #expandIcon="props">
    <span v-if="props.record.children && props.record.children.length > 0">
      <div
        v-if="props.expanded"
        style="display: inline-block; margin-right: 10px"
        @click="
          (e) => {
            props.onExpand(props.record, e)
          }
        "
      >
        <Icon icon="ep:caret-bottom" :size="12" />
      </div>
      <div
        v-else
        style="display: inline-block; margin-right: 10px"
        @click="
          (e) => {
            props.onExpand(props.record, e)
          }
        "
      >
        <Icon icon="ep:caret-right" :size="12" />
      </div>
    </span>
    <span v-else style="margin-right: 22px"></span>
  </template>
</a-table>