• vue3 使用element-plus 如何再次封装table组件
• 基本步骤
• 创建子组件:
• 默认数据配置
• 在需要使用自定义 Table 组件的地方引入并使用:
创建子组件:
创建一个新的 .vue 文件,例如子组件 baseTable.vue,作为你封装后的 Table 组件。
<template>
<div class="base-table-wrapper">
<el-table :data="tableData" style="width: 100%">
<template v-for="item in column" :key="item.prop">
<el-table-column :prop="item.prop" :label="item.label" :width="item.width">
<template #default="scope" v-if="!!item.isScope">
<slot :name="item.prop+'ScopeContent'" :row="scope.row" />
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script setup>
const props = defineProps({
column: {
type: Array,
default() {
return []
}
},
tableData: {
type: Array,
default() {
return []
}
},
})
</script>
<

本文介绍了如何在Vue3中利用Element-Plus库封装table组件,并利用具名插槽和作用域插槽实现列的自定义内容传递。通过创建子组件,定义默认数据配置,展示了如何在需要的地方引入并使用这个自定义组件,以及如何传递数据和HTML结构到子组件的具名插槽中。
最低0.47元/天 解锁文章
2064

被折叠的 条评论
为什么被折叠?



