vue3 ant 树形表格展开符号替换

 

展开图标有expandIcon属性。需要返回一个dom节点。

1表格配置属性:expandIcon="(props: any) => expandIcon(props)"

2 引入需要的组件以及h方法配合生成dom.

 

  <a-table
        :dataSource="dataSource.list"
        :columns="columns"
        :expandIcon="(props: any) => expandIcon(props)"
      >

import { defineComponent, ref, reactive, toRaw, h } from "vue";
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue';


export default defineComponent({
  components: {
    CaretRightOutlined,
    CaretDownOutlined
  },

function expandIcon(pro: any) {
      if (!pro.record.children) return
      if (pro.record.children.length > 0) {//有数据
        if (pro.expanded) {//有数据展开
          return h(CaretDownOutlined, {
            onclick: (e: any) => {
              pro.onExpand(pro.record, e);
            }
          })
        } else {//有数据未展开
          return h(CaretRightOutlined, {
            onclick: (e: any) => {
              pro.onExpand(pro.record, e);
            }
          })
        }
      } else {//无数据
        return ''
      }
    }

 生成效果如下。