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

最新推荐文章于 2024-09-26 11:49:06 发布

原创最新推荐文章于 2024-09-26 11:49:06 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

1 篇文章

订阅专栏

在使用Ant Vue Design时遇到表格展开图标自定义的问题，由于直接解析jsx报错，通过创建icon.js文件并引入RightOutlined和DownOutlined图标解决。在icon.js中根据记录的子项长度动态设置展开图标，并在点击时调用onExpand方法。该方法适用于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