需求
将element组件中的table组件和pagination分页组件封装为一个组件,并且可以控制具体某列是否显示
传统姿势
table组件传入json数据,通过for循环生成table列
这个姿势不太舒服
1.新的api，封装的json总会涉及到各种属性名,随着table越来越复杂，外部传入配置项越来越多,内部if判断越来越多
2.不利于其他同学使用,这个姿势只能说当时写的时候挺爽,但过一阵子,这部分有地方需要该,别说别的同学,自己可能都要看上一阵子
3.就我来说这样写,主要是觉得这样写简便了,不用每次都写列标签,但其实算上其他配置项整体来看,这样并没有少些多少
新姿势
新姿势主要使用了渲染函数,因此感兴趣的同学可以先从这部分了解
<script>
export default {
props: ["tableData", "VisibleCol"],
data() {
return {
vnode: [],
};
},
methods: {
pageChange() {
console.log("dd");
},
},
created() {
this.vnode = this.$slots.clomns;
},
render() {
return (
<div>
<el-table data={this.tableData} style="width: 100%">
{this.vnode.filter((node) => {
if (this.VisibleCol.includes(node.componentOptions.propsData.label)) {
return node;
}
})}
</el-table>
<div class="block">
<el-pagination
layout="prev, pager, next"
total={50}
v-on:current-change={this.pageChange}
>
</el-pagination>
</div>
</div>
);
},
};
</script>
<mdd-table
:key="tablekey" <!--给表格一个key，每次切换显示列,确保重新渲染-->
:tableData="tableData" <!--表格数据-->
:VisibleCol="VisibleCol"> //需要显示列的列名
<template #clomns>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</template>
</mdd-table>
思路
这部分主要是通过this.$slots读取插入组件中插槽部分的内容,该属性值为虚拟dom,因此需要配合渲染函数使用,这里为了方便我使用jsx直接进行编写。
1.首先将所有需要显示的列写为数组,传入该组件,在渲染过程中,根据该数组进行筛选,筛选需要显示的列
这个姿势舒服
将功能封装起来,仍使用原有element-table内的api,并且可以直接根据文档功能进行扩展,不用再对组件内进行更改
参考:
