vue 修改ant中table表格的展开图标 树形表格expandIcon自定义图标

首先看ant 文档给出的API expandIcon

这里给了两个方法 第一种是在js里面写 第二种是在模板里面写插槽
我这里用的插槽
因为我这里用的是vue3 我用第一种方法写 js里面引用图标还是会显示图标未引用 虽然也能展示出来 但页面会报错 时间紧迫没研究直接用第二种第二种vue2,3均可用 只需要换上2的语法就好
如果用vue2的小伙伴可以选择第一种方法 应该是没什么问题的 因为图标不是组件
这里第一种方式也会说下 因为两种方式差别不大的

***效果图长这样

第一种方式（不行的话 别急 看第二种 亲测有效）
在table里面加上这个参数

然后在js里面写

 // 展开图标
      expandIcon(props) {
     //判断当有子级时添加图标
        if (props.record.children.length > 0) {
        //有数据-展开时候图标
          if (props.expanded) {
          //这里的margin-right是为了让图标和字体有一点间距
            return (
               {
                  props.onExpand(props.record, e);
                }}
              >
                
              
            );
           //无数据时-关闭的图标
          } else {
            return (
               {
                  props.onExpand(props.record, e);
                }}
              >
                
              
            );
          }
        } else {
        //这里是为了让无图标子级的父元素也给了个margin-right，让它跟有子级的父元素在同一竖线上
          return ;
        }
      }

第二种方式 超级详细教程 亲测有效（限vue3）因为插槽写法不一样
使用插槽 在table里面写
这里就不过多解释了 第一种方法里都有

图标的引用 这里也贴一下吧 避免小伙伴找不到

import { RightOutlined, DownOutlined } from "@ant-design/icons-vue";

  components: {
    RightOutlined,
    DownOutlined,
  },

看眼结构是这样子的啊 别写错了 （也是 *** 碎了心）

over 不懂留言