使用antd-vue 的a-table自定义展开图标并且异步展开（展开图标点开两次才生效的问题解决）

1 a-table自定义展开图标

    

需求是展开图标换成这个样子

可以利用a-table的  expandIcon 属性

具体使用如下

 <a-table
        v-if="isRouterAlive"
        style="margin-top:20px"
        :columns="columns"
        :data-source="matterList"
        :expandIcon="customExpandIcon"
        :expandedRowKeys="expandedRowKeys"
        :defaultExpandedRowKeys="defaultExpandedRowKeys"
        @expand="fatherExpand"
        :indentSize="16"  
  />

<script>
import IconCaretRight from '@ant-design/icons/svg/outline/caret-right.svg?inline'
import IconCaretDown from '@ant-design/icons/svg/outline/caret-down.svg?inline'
export default {
  data () {
    return {
      expandedRowKeys: [],
      defaultExpandedRowKeys: [],
      // 这是table数据
      matterList: [],
      columns: []
    }
  },
  methods: {
     // 树节点展开方法 点击展开图标时的方法
    // 利用es7的async await 可以等数据请求回来之后 进行后续流程，否则就会出现点击两次数据才显示
    async fatherExpand (expanded, record) {
      if (expanded) {
        await this.getChild(record)
        this.expandedRowKeys.push(record.iid)
      } else {
        this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
      }
    },
 // 栏目树获取子节点数据
    // 把获取来的数据放到 record的children里点击展开图标就会有数据显示了
    getChild (record) {
      return new Promise(resolve => {
        evnetSort({ pid: record.iid }).then(res => {
          // table默认带树表格,如果使用children作参数名则会出现两个表格
          if (res.success) {
            res.data.matterEntities.map(item => {
              item.children = []
            })
            record.children = res.data.matterEntities
            if (record.children === null || record.children.length === 0) {
              record.hasChild = false
              this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
            }
            resolve()
          }
        })
      })
    },
customExpandIcon (props) {
      // 是否有子项，无子项不展示图标
      // record是每行的数据，后端返回的数据会有一个hasChild字段判断是否有子项
      if (props.record && props.record.hasChild) {
        // props.expanded a-table组件判断是否展开了为true是展开,false为没展开
        if (props.expanded) {
          // onClick事件必须添加上，相当于把a-table里的展开事件给了自定义的图标，不加的话点击会失效
          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
            {IconCaretDown} onClick={e => { props.onExpand(props.record, e) }} />
        } else {
          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
            {IconCaretRight} onClick={(e) => { props.onExpand(props.record, e) }} />
        }
      } else {
        return <span style="padding-left: 21px;" />
      }
    },
  }

}
</script>