45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<template>
|
||
<el-table-column
|
||
v-if="shouldShow"
|
||
:prop="prop"
|
||
:label="label"
|
||
v-bind="$attrs"
|
||
>
|
||
<template v-for="(_, name) in $slots" #[name]="slotProps">
|
||
<slot :name="name" v-bind="slotProps" />
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, inject } from 'vue'
|
||
|
||
interface Props {
|
||
prop?: string
|
||
label?: string
|
||
// 其他 el-table-column 的所有属性都通过 $attrs 传递
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
prop: '',
|
||
label: ''
|
||
})
|
||
|
||
// 从父组件注入 isColumnVisible 函数
|
||
const isColumnVisible = inject<(propOrLabel: string) => boolean>('isColumnVisible', () => true)
|
||
|
||
// 计算是否应该显示该列
|
||
const shouldShow = computed(() => {
|
||
// 优先使用 prop，如果没有 prop 则使用 label
|
||
const key = props.prop || props.label || ''
|
||
if (!key) {
|
||
// 如果没有 prop 和 label，默认显示（可能是序号列等特殊列）
|
||
return true
|
||
}
|
||
|
||
// isColumnVisible 函数会同时匹配 prop 和 label，所以直接传递即可
|
||
return isColumnVisible(key)
|
||
})
|
||
</script>
|
||
|