1)在封装组件中使用table具名插槽,并自定义具名插槽,对外开发使用:commonTable
<template> <div class="common-table-style"> <el-table :data="tableData" tooltip-effect="dark" border highlight-current-row :max-height="maxHeight" :empty-text="emptyText" @sort-change="sortChange" @filter-change="filterChange" @selection-change="selectionChange" ref="commonRef" > <slot></slot> <div slot="append"> <slot name="xxxx"></slot> </div> </el-table> </div> </template>
<script>
export default {
props: {
tableData: {
type: Array,
default: () => {}
},
maxHeight: {
type: Number,
default: null
},
emptyText: {
type: String,
default: "暂无数据"
}
},
methods: {
sortChange(e) {
this.$emit("sortChange", e);
},
filterChange(e) {
this.$emit("filterChange", e);
},
selectionChange(e) {
this.$emit("selectionChange", e);
}
}
};
</script>
2)封装组件的使用方法:
<template> <div v-loading="loading"> <sn-table :tableData="entityTableData.list" class="mt20"> <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column> <el-table-column label="中文名" prop="entityChName" show-overflow-tooltip></el-table-column> <div slot="xxxxx"> more content </div> </sn-table> </div> </template>
原文地址:https://www.cnblogs.com/zhang134you/p/11792925.html
时间: 2024-11-01 01:49:44