前言
vue2搭配使用的框架基本都是Element-ui,如何开发时每次都过去复制,需要删除一部分,增加一部分,如果碰到的是表单类型的table表格,那更麻烦。因此在符合公司应用场景下面对Element的el-table表格进行了二次封装。
一、效果展示
一个el-table表格的封装,需要考虑多个方面,实用,适用,自适应,动态并且尽量不脱离element文档(因为你不一定会写文档)
这是我使用效果,这个表格的封装,还集成了分页
二、基础封装
el-table表格的封装不是一蹴而就,要根据使用场景来一步一步完善,也许你要说我把Table Attributes里面的属性全部封装进去不就行了,这样确实可以,但没必要,像border、size、show-header等一些属性,其实是不用封装,直接写死的,因为一套系统,不会存在不同风格的table表格。
el-table的封装第一步,就是以Element里面el-table的基础表格为模板,进行改造。
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
v-for="(item, index) in tableHead"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width || '80'">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array, // 表格
default: () => [],
},
tableHead: {
type: Array, // 表格
default: () => [], // 举个荔枝 [{prop: 'name', label:'名字', width: '180'}]
},
},
data() {
return {
}
}
}
</script>
tableHead: Array,按上方代码,其中有prop(字段key),label(表头label)、width(单元宽度)三个属性
tableData:Array,按Element-ui的来
这样一个简单地额表格就封装完成了,后面只用不停的写JSON文件就行。
三、封装进阶
虽然上一步已经封装成功了,但是过于简陋没法使用,需要进一步封装,比如序号、复选框、高度自适应,如有需要,可以前往仓库查看