饿了么表格二次封装具名插槽append的分装实现 _饿了么

我自横刀向天笑，去留肝胆两昆仑。这篇文章主要讲述饿了么表格二次封装具名插槽append的分装实现相关的知识，希望能为你提供帮助。
【饿了么表格二次封装具名插槽append的分装实现】1）在封装组件中使用table具名插槽,并自定义具名插槽，对外开发使用:commonTable

< template> < div class="common-table-style"> < el-table :data="https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/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>