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

首先看ant 文档给出的API expandIcon

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

***效果图长这样

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

<a-table :expandIcon="expandIcon" ></a-table>

然后在js里面写

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

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

<a-table>
  <template #expandIcon="props">
        <span v-if="props.record.children.length > 0">
          <div
            v-if="props.expanded"
            style="display: inline-block; margin-right: 10px"
            @click="
              (e) => {
                props.onExpand(props.record, e);
              }
            "
          >
            <DownOutlined />
          </div>
          <div
            v-else
            style="display: inline-block; margin-right: 10px"
            @click="
              (e) => {
                props.onExpand(props.record, e);
              }
            "
          >
            <RightOutlined />
          </div>
        </span>
        <span v-else style="margin-right:29px"></span>
      </template>
</a-table>

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

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

  components: {
    RightOutlined,
    DownOutlined,
  },

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

over 不懂留言