vue3 + TS + Ant Design Vue table表格树结构自定义图标

html

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
      :expandIconColumnIndex="1"
      :expandIcon="iconFun"
    >

ts

<script lang="ts">
import { defineComponent, ref } from "vue";
import { columns, data } from "./config";
import { RightOutlined, DownOutlined } from "@ant-design/icons-vue";
import iconFun from "./icon";
export default defineComponent({
  setup() {
    const value: any = ref("");
    const onSearch = () => {};
    // const iconFun = () => {};
    return {
      value,
      onSearch,
      data,
      columns,
      iconFun
    };
  }
});
</script>

js 这里的代码直接复制

import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons-vue";

<caret-down-outlined />
const iconFun = (props) => {
  // console.log(props);
  if (props.record?.children) {
    if (props.expanded) {
      //有数据-展开时候图标
      return (
        <i
          style="color:'black';cursor: pointer;"
          onClick={(e) => {
            props.onExpand(props.record, e);
          }}
        >
         <CaretDownOutlined />
        </i>
      );
    } else {
      return (
        <i
          style="color:'black';cursor: pointer;"
          onClick={(e) => {
            props.onExpand(props.record, e);
          }}
        >
        <CaretRightOutlined />
        </i>
      );
    }
  }else{
    return (
      <div style="width:16px;height:16px;display: inline-block;">
     
      </div>
    );
  }
};
export default iconFun;

遇到的问题

因为项目是TS
所以不能直接使用js代码
必须外部引入
引入的时候会报错(TS还不熟练的锅)
需要在tsconfig.json中添加一句"allowJs": true,