饿了么表格二次封装具名插槽append的分装实现
Posted 燃烧小火苗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了饿了么表格二次封装具名插槽append的分装实现相关的知识，希望对你有一定的参考价值。
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>
以上是关于饿了么表格二次封装具名插槽append的分装实现的主要内容，如果未能解决你的问题，请参考以下文章