58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<el-table-column
|
|
v-bind="columns"
|
|
>
|
|
<template v-if="columns?.slots?.header" #header>
|
|
<slot :name="columns?.slots?.header"></slot>
|
|
</template>
|
|
<template #default="scope">
|
|
<template v-if="columns.children?.length">
|
|
<fvTableColumn
|
|
v-for="columnChildren in columns.children"
|
|
:key="columnChildren.prop"
|
|
:columns="columnChildren"
|
|
>
|
|
</fvTableColumn>
|
|
</template>
|
|
<slot v-else-if="columns.slots?.default" :name="columns.slots?.default" v-bind="scope"></slot>
|
|
<component v-else-if="columns?.currentRender" :is="contentRender(columns?.currentRender, scope)"></component>
|
|
<template v-else-if="!['selection', 'index', 'expand'].includes(columns?.type)">
|
|
{{ renderCell(scope) }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { isVNode } from 'vue'
|
|
|
|
defineOptions({
|
|
name: 'fvTableColumn',
|
|
inheritAttrs: false
|
|
})
|
|
|
|
const props = defineProps({
|
|
columns: {
|
|
type: Object,
|
|
default: []
|
|
}
|
|
})
|
|
|
|
const contentRender = (render, scope) => {
|
|
const content = render({row: unref(scope.row), index: scope.$index})
|
|
return isVNode(content) ? content : <span>{content || '!(^-^)!'}</span>
|
|
}
|
|
|
|
const renderCell = ({row, column, $index}) => {
|
|
const property = column.property
|
|
const value = property && row[property]
|
|
if(column && column?.formatter) {
|
|
return column.formatter(row, column, value, $index) || '--'
|
|
}
|
|
return value ? value.toString() : '--'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |