fix: 动态插槽

This commit is contained in:
2023-07-22 17:52:31 +08:00
parent 712b61af73
commit 16663000f1
2 changed files with 50 additions and 9 deletions

View File

@ -2,7 +2,7 @@
* @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-07-18 12:30:07
* @LastEditors: zhaojinfeng 121016171@qq.com
* @LastEditTime: 2023-07-22 16:36:13
* @LastEditTime: 2023-07-22 17:52:02
* @FilePath: \vue3\packages\select-table-modal\index.vue
* @Description: 模态框选择表格
*
@ -45,9 +45,18 @@
@selection-change="handleSelectionChange"
>
<el-table-column v-if="multiple" type="selection" width="55" align="center" />
<el-table-column v-for="column in columns" :key="column.prop" :align="column.align || 'center'" :label="column.label" :prop="column.prop" :formatter="column.formatter">
<template #default="scope">
<slot :name="`column${column.prop}`" :scope="scope" />
<el-table-column
v-for="column in columns"
:key="column.prop"
:align="column.align || 'center'"
:label="column.label"
:prop="column.prop"
:formatter="column.formatter"
>
<template v-if="isExist(column.prop)" #default="{ row, $index }">
<!-- element自带的属性$index -->
<!-- eslint-disable-next-line vue/valid-attribute-name -->
<slot :name="`column-${column.prop}`" :row="row" :$index="$index" />
</template>
</el-table-column>
</el-table>
@ -140,6 +149,12 @@ interface FormItem {
}
const showDialog = ref(false)
const slots = Object.keys(useSlots())
function isExist(prop: string) {
return slots.includes(`column-${prop}`)
}
let tableData = $ref<any[]>([])
let selection = $ref<any>()
let selections = $ref<Record<string, any>[] | null>(null)