expandIcon ant-vue-design中嵌套表格table的expandIcon自定义图标vue3.0+ts报错解决方式

expandIcon ant-vue-design中嵌套表格table的expandIcon自定义图标vue3.0+ts报错解决方式

<a-table :columns="columns" :data-source="data" v-if="data.length>0" 
    :indentSize="25"
    :expandIcon="iconFun" 
    :pagination="false" :rowKey="(record)=>{ return record.id}">
  </a-table>
  	<script lang="ts">
	import iconFun from './icon'
	</script>

因为现在直接解析jsx报错，换个思路，在js中注册，直接引用渲染好的vnode。同目录新建一个icon.js

import { RightOutlined, DownOutlined} from "@ant-design/icons-vue";
const iconFun=(props)=>{
    console.log(props)
    if (props.record.children.length > 0) {
        if (props.expanded) {//有数据-展开时候图标
        return <i style="color:'black';margin-right:8px"
                onClick={(e) => {
                  props.onExpand(props.record, e);
                }}
              >
               <DownOutlined />
              </i>
          
        } else{
          return <i style="color:'black';margin-right:8px"
          onClick={(e) => {
            props.onExpand(props.record, e);
          }}
        >
            <RightOutlined />
        </i>
           
        }
      }
}
export default iconFun