在项目中经常会使用到element的表格，如果每次都cv,也确实有点麻烦，基于这个情况我对表格进行了二次封装
写一个Table组件
首先先写表格样式
<el-table
:data="tableData"
:header-cell-style="headerStyle"
:height="height"
:border="border"
@selection-change="handleSelectionChange"
>
<el-table-column
v-if='selection'
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="v in tableProp"
:key="v.label"
:prop="v.code"
:sortable='v.sortable'
:label="v.label"
:width="v.width"
>
<template slot-scope="scope">
<div v-if='!v.code'>
{{ scope.row[scope.column.property] }}
</div>
<div v-else>
<slot name="row" :row="scope.row"></slot>
</div>
</template>
<el-table-column
v-for="(item, i) in v.data"
:key="i"
:sortable='item.sortable'
align="center"
:width="item.width"
:prop="item.code"
:label="item.label"
>
<template slot-scope="scope">
<div v-if='!v.code'>
{{ scope.row[scope.column.property] }}
</div>
<div v-else>
<slot name="row" :row="scope.row"></slot>
</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" v-if='ishandle'>
<template slot-scope="scope">
<slot name="edit" :row="scope.row" :index="scope.$index"></slot>
</template>
</el-table-column>
</el-table>tableData为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为data是否存在，headerStyle为表头样式，height为表的高度，sortable以该列为基准的排序，border是否显示边框,handleSelectionChange多选，selection是否显示多选，ishandle是否显示操作，这里使用插槽进行写操作
export default {
props: {
height: {
type: Number,
default: 220,
},
ishandle:{
type: Boolean,
default: false,
},
border:{
type: Boolean,
default: false,
},
tableProp: {
type: Array,
default: () => [
{
code: 'index',
label: '指标',
width: 100,
},
{
code: 'PAC',
label: 'PAC',
width: 120,
data:{
code: 'PAB',
label: 'PAB',
width: 60,
}
},
{
code: 'PAM',
label: 'PAM',
width: 60,
code:true,
},
{
code: 'POWER_CONSUMPTION',
label: '综合电耗(kW·h)',
width: 50,
},
{
code: 'WATER_CONSUMPTION',
label: '自用水率(%)',
},
],
},
tableData: {
type: Array,
default:() => [
{
index:1,
PAC:'1'
PAM:'1',
POWER_CONSUMPTION:'1',
WATER_CONSUMPTION:'1'
}
]
},
Style:{
type:String,
default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;'
}
},
data() {
return {
show: false,
};
},
methods: {
// 样式
headerStyle() {
return this.Style;
},
// 多选
handleSelectionChange(val){
this.$emit('SelectionChange',val)
}
},
};第二步加分页
<el-pagination
:background='background'
:layout="layout"
:total="total"
:page-size="pageSize"
:current-page.sync="current"
:page-sizes="pageSizes"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:hide-on-single-page='singlepage'
>
</el-pagination>
background背景是否显示，layout组件布局，子组件名用逗号分隔，total总条数，pageSizes每页显示个数选择器的选项设置，current当前页码，pageSize每页显示条目个数，singlepage只有一页时是否隐藏,handleSizeChangepageSize 改变时会触发,handleCurrentChange改变时会触发
export default {
props: {
background: {
type: Boolean,
default: false,
},
layout:{
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
total:{
type: Number,
default: 100,
},
pageSize:{
type: Number,
default: 10,
},
pageSizes:{
type: Array,
default: () => [10, 20, 30, 40, 50, 100],
},
singlepage: {
type: Boolean,
default: false,
},
current:{
type: Number,
default: 1,
},
},
methods: {
// pageSize 改变时会触发
handleSizeChangepageSize (val) {
this.$emit('handleSizeChangepageSize ',val)
},
// currentPage 改变时会触发
handleCurrentChange(val){
this.$emit('handleCurrentChange',val)
}
},
};在页面中使用
先引入Table.vue页面
<Table
:height="90"
class="left-top-table"
:tableData="tableIndex"
:tableProp="tableProp"
@handleCurrentChange='handleCurrentChange'
@handleSizeChangepageSize ='handleSizeChangepageSize '
>
<template slot="edit" slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.index, scope.row)"
>编辑</el-button
>
</template>
</Table>//pageSize 改变时会触发
handleCurrentChange(val){
....
}
// currentPage 改变时会触发
handleSizeChangepageSize (val){
....
}
// 编辑方法
handleEdit(index,row){
....
}更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形
到此这篇关于基于element-ui表格的二次封装实现的文章就介绍到这了,更多相关element表格二次封装内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！