html
<a-table
:columns="columns"
:data-source="data"
bordered
:pagination="false"
:expandIconColumnIndex="1"
:expandIcon="iconFun"
>
ts
<script lang="ts">
import { defineComponent, ref } from "vue";
import { columns, data } from "./config";
import { RightOutlined, DownOutlined } from "@ant-design/icons-vue";
import iconFun from "./icon";
export default defineComponent({
setup() {
const value: any = ref("");
const onSearch = () => {};
// const iconFun = () => {};
return {
value,
onSearch,
data,
columns,
iconFun
};
}
});
</script>
js 这里的代码直接复制
import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons-vue";
<caret-down-outlined />
const iconFun = (props) => {
// console.log(props);
if (props.record?.children) {
if (props.expanded) {
//有数据-展开时候图标
return (
<i
style="color:'black';cursor: pointer;"
onClick={(e) => {
props.onExpand(props.record, e);
}}
>
<CaretDownOutlined />
</i>
);
} else {
return (
<i
style="color:'black';cursor: pointer;"
onClick={(e) => {
props.onExpand(props.record, e);
}}
>
<CaretRightOutlined />
</i>
);
}
}else{
return (
<div style="width:16px;height:16px;display: inline-block;">
</div>
);
}
};
export default iconFun;
遇到的问题
因为项目是TS
所以不能直接使用js代码
必须外部引入
引入的时候会报错(TS还不熟练的锅)
需要在tsconfig.json中添加一句"allowJs": true,