复制粘贴即可：
一、定义table组件
<template>
<div class='main'>
<div>
<el-table ref="multipleTableRef" :height="height" :default-expand-all="isExpend" :data="treeTableData"
style="width: 100%; margin-bottom: 20px" row-key="id" border>
<el-table-column :width="item.width" :fixed="item.fixed" show-overflow-tooltip align="center"
v-for="(item, i) in treeTableProps" :key="i" :label="item.label">
<template #default="scope">
<!-- 自定义插槽展示 -->
<slot v-if="item.slot" :name="item.prop" :scope="scope"></slot>
<!-- 非自定义处理(判空) -->
<span v-else-if="scope.row[item.prop] === '' || scope.row[item.prop] === null">--</span>
<!-- 非自定义处理(正常展示) -->
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
interface Props {
// 属性名
prop: string,
// 属性标签
label: string,
// 是否固定(非必填)
fixed?: boolean,
// 行宽(非必填)
width?: number,
// 是否显示插槽(非必填)
slot?: boolean,
}
const props = defineProps({
/** 表格数据 */
treeTableData: {
type: Array,
default: null,
required: true
},
/** 表格属性 */
treeTableProps: {
type: Array<Props>,
default: null,
required: true
},
/** 是否默认全部展开 */
isExpend: {
type: Boolean,
default: false,
required: false
},
/** 表格高度 */
height: {
type: String,
default: '60vh',
required: false
}
})
onMounted(() => {
})
</script>
<style scoped lang='less'>
//添加你想设置的样式
</style>二、在父组件中使用
<template>
<div class='main'>
<TableTree :treeTableData="tableData" :treeTableProps="treeTableProps">
<!-- 插槽展示 -->
<template #address>
<el-input size="small" placeholder="Type to input" />
</template>
</TableTree>
</div>
</template>
<script lang='ts' setup>
import TableTree from '@/components/BaseTableTree/index.vue'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// 定义表格数据接口
interface User {
id: number
date: string
name: string
address: string
hasChildren?: boolean
children?: User[]
}
// 定义表格头部属性名
const treeTableProps = [
{ prop: 'date', label: '日期', width: 300, fixed: true, },
{ prop: 'name', label: '名称', },
{ prop: 'address', label: '地址', slot: true, },
]
// 定义表格假数据
const tableData: User[] = [
{
id: 1,
date: '2016-05-04',
name: '',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 31,
date: '2016-05-01',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 311,
date: '2016-05-01',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 312,
date: '2016-05-01',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
}
]
},
{
id: 32,
date: '2016-05-01',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
},
],
},
{
id: 4,
date: '2016-05-03',
name: '小明',
address: 'No. 189, Grove St, Los Angeles',
},
]
onMounted(() => {
})
</script>
