我们经常使用element ui的小伙伴儿可能知道，官网提供的table组件虽然说api齐全，功能强大，但是我们用起来的时候每次都需要配置好多 属性。然后表格和分页还是分开的，我们在进行业务功能的编写时，通常是不断的进行一个个表格的api配置。一个两个我们还觉得没什么，但是当大量的表格出现的时候，头痛的感觉有没有，不但篇幅较大，重复的配置也让我们烦躁。这个时候，我们多么希望一个简洁的表格配置就可以出现一个我们所需要的列表呢。
今天，咱就教大家如何进行element table的二次封装，这里只是进行简单的封装，具体的复杂需求小伙伴儿们根据你们的业务需求更改即可。先呈上效果图
QQ截图20201109160451.png
<dynamic-table :tableHeader="tableHeader" :tableData="tableData" :config="config">
<!-- 这里不得的赞叹插槽功能实在是太好用了，传递表格当前行的数据，插入自定义按钮，简直不要太爽-->
<template v-slot:handles="t">
<el-button-group>
<el-link type="primary" @click="edit(t) icon="el-icon-edit">编辑</el-link>
<el-link type="danger" @click="delete(t)>删除<i class="el-icon-delete el-icon--right"></i> </el-link>
</el-button-group>
</template>
</dynamic-table>
<dynamic-table style="margin-top: 15px;" :tableHeader="tableHeader2" :tableData="tableData2" :config="config2">
<template v-slot:handles="t">
<el-button-group>
<el-link type="success" @click="watch(t) icon="el-icon-view">查看</el-link>
<el-link type="warning" @click="publish(t)>发布<i class="el-icon-finished el-icon--right"></i> </el-link>
</el-button-group>
</template>
</dynamic-table>
看看这神仙代码，区区几行就实现了两个表格！（这逼装的我自己都看不下去了）
细心的小伙伴儿已经发现了，其实表格里需要传递的数据分三部分，
第一部分：tableHeader
这个是用来干嘛的呢，这是我们定义的表头。不论你表格数据有多少，我们把表头定下来，你就得跟着这个节奏走，在这里，我们可以判断，他到底是骡子是马。比如。第一行的column我们要作为复选框，那么我们就加个判断，他是不是type = “selection”，再假如我们要加索引，就判断它类型是不是index，要显示图片，我们就判断它是不是image。
//表格组件
<el-table
class="customer"
:data="tableData"
style="width: 100%">
<!-- 循环表头数据，判断列显示类型 -->
<template v-for="(col,index) in tableHeader">
<!-- 多选框 -->
<el-table-column v-if="col.type == 'selection'" :label="col.label" :type="col.type" :width="col.width"></el-table-column>
<!-- 索引行 -->
<el-table-column v-else-if="col.type == 'index'" :label="col.label" :type="col.type" :width="col.width"></el-table-column>
<!-- 图片 -->
<el-table-column v-else-if="col.type == 'image'" :label="col.label" :width="col.width" :prop="col.prop">
<template slot-scope="scope">
<div class="content-image"><img :src="scope.row[col.prop]"/></div>
</template>
</el-table-column>
<!-- 给日期行加个好看的icon，属于自定义，所以要单独抽离出来 -->
<el-table-column v-else-if="col.type == 'date'" :label="col.label" :width="col.width" :min-prop="col.prop">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row[col.prop] }}</span>
</template>
</el-table-column>
<!-- 操作按钮，我们不知道表格操作按钮业务需求是什么样子的，那我们就给插槽，不同业务可以按需求添加操作按钮 -->
<el-table-column v-else-if="col.type == 'handle'" :label="col.label" :min-width="col.width" :fixed="col.fixed">
<template slot-scope="scope">
<slot name="handles" :col="scope.row"></slot>
</template>
</el-table-column>
<!-- 对于其他没有类型的列，统统算作普通默认类型。直接按照表格属性呈现就行 -->
<el-table-column v-else :label="col.label" :min-width="col.width" :prop="col.prop" :formatter="col.formatter?col.formatter:null">
</el-table-column>
</template>
</el-table>
再给你们来看看tableHeader的定义数据。
// type:{
// selection: checkbox选项,
// date: 日期格式,
// button: 操作按钮,
// image: 图片,
// index: 索引,
// expand: 列表展开,
// tag: 一般用于筛选类型标签,
// }
export const tableHeader = [
{
type:'selection',//渲染的表格行内数据类型
width:'55',//表格列所占宽度
label:'选择',//表格列名
align:'center',//表格列数据对其方式
fixed:false,
},
// {
// type:'index',//渲染的表格行内数据类型
// width:'55',//表格列所占宽度
// label:'索引',//表格列名
// align:'center',//表格列数据对其方式
// fixed:false,
// },
{
prop:'createDetails',//字段
label:'详情',//表格列名
align:'center',//表格列数据对其方式
width:'120',
fixed:false,
},
{
type:'date',//渲染的表格行内数据类型
prop:'createDate',//字段
width:'120',
label:'创建日期',//表格列名
align:'center',//表格列数据对其方式
},
{
prop:'createStatus',//字段
width:'80',//表格列所占宽度
label:'状态',//表格列名
formatter:item =>{
const statusMap = {
0: '类型1',
1: '类型2'
}
return statusMap[item.createStatus]
},
align:'center',//表格列数据对其方式
},
{
type:'image',//渲染的表格行内数据类型
prop:'createLogo',//字段
width:'120',//表格列所占宽度
label:'图标',//表格列名
align:'center',//表格列数据对其方式
},
{
prop:'createAdress',//字段
label:'地址',//表格列名
width:'200',
align:'center',//表格列数据对其方式
},
{
prop:'createID',//字段
label:'idCard',//表格列名
width:'120',
align:'center',//表格列数据对其方式
},
{
prop:'createName',//字段
width:'80',//表格列所占宽度
label:'姓名',//表格列名
align:'center',//表格列数据对其方式
},
{
prop:'createPhone',//字段
width:'120',//表格列所占宽度
label:'手机号',//表格列名
align:'center',//表格列数据对其方式
},
{
type:'handle',//类型是操作按钮
width:'200',//表格列所占宽度
label:'操作',//表格列名
align:'center',//表格列数据对其方式
fixed:'right',//表格列是否固定，固定到右端
}
]
看到这里是不是豁然开朗，我们在复用的时候，只需要根据后台返回的字段，把表格的表头定义好，我们的表格就做完了百分之80了。tableData是我们请求的后台表格数据，这里不再赘述。config里面是我们的分页和表格所需要的属性，这个我在这里没有写，有需要的同学可以看我下一篇封装分页功能。
//表格组件的属性定义
<script>
export default {
name:'DynamicTable',
components:{},
props:{
config:{
type:Object,
default:()=>{}
},
tableHeader:{
type:Array,
default:()=>[]
},
tableData:{
type:Array,
default:()=>[]
}
},
data(){
return {
currentPage:20,
}
},
mounted() {
},
methods:{
handleSizeChange(){
},
handleCurrentChange(){
}
}
}
</script>
好了，一个基本的表格封装就被我们完成了。页面需要表格其他功能的小伙伴，可以自己发挥。
有不明白的小伙伴儿可以私信我要源码，这里只是少了表格数据以及分页功能。相信葱明的小伙伴儿一看就会！祝大家2020代码越写越溜，觉得对你有帮助的小伙伴儿，给个赞好不好！十分感谢
网友评论