基于element的el-table组件.el-pagination组件二次封装

平常项目中,我们需要用到大量的el-table组件，而有些组件只是一些内容的展示，或者一些常规的table组件,这个时候我们可以考虑下去封装,方便复用.下面就是我的代码,如有不足,请在下方留言。

1 首先我们需要建立一个父组件，引入子组件，可以根据自己的喜好把table里面的操作按钮封装在一个组件里面,我这里是分开封装的。

<template>
<div class="common_bgc">
<!-- table表格 -->
<com-table :tableData='tableData'
:tabCloum='tabCloum'
:tableSelect='tableSelect'
:tableRadio='tableRadio'
:pageNum='pageNum'
:pageSize='pageSize'
:total='total'
@handleSelectionChange='handleSelectionChange'
@handleCurrentChange='handleCurrentChange'>
<el-table-column slot="button"
label="操作"
align="center">
<template slot-scope="scope">
<!-- tab里面的操作按钮 -->
<table-button :scope='scope'
:tabButtonList='tabButtonList'
@tableButtonMethod='tableButtonMethod'></table-button>
</template>
</el-table-column>
</com-table>
</div>
</template>

<script>
export default {
data () {
return {
pageNum: 1,
pageSize: 10,
total: 20,
tabButtonList: [{
name: "编辑",
icon: "editor",
id: "4"
},{
name: "详情",
icon: "details",
id: "5"
},{
name: "删除",
icon: "delete",
id: "6"
}],//传table里面有那些操作
tableData: [],
tableSelect: true,//是否有多选操作列
tableRadio: false,//是否有单选操作列
tabCloum: [
{ label: '设备编号', prop: 's1' },
{ label: '设备名称', prop: 's2' },
{ label: '区域名称', prop: 's3', ellipsisyi: 'ellipsis' },//ellipsis预留移入显示
{ label: '街道名称', prop: 's4', render: (row) => {
if (row.s4 == "1") {
return "<div style='color: red;'>街道1</div>"
} else {
return "<div style='color: yellowgreen;'>街道2</div>"
}
}},
{ label: '站点名称', prop: 's5' },
{ label: '挂载设备数量', prop: 's6' },
{ slot: 'button', name: '操作' }], // 操作列
}
},
created () {
},
mounted () {
},
watch: {
},
methods: {
//新增 编辑 详情 删除
tableButtonMethod (val) {
console.log(val, 'val')
switch (val.state) {
// 新增
case '3':
break;
case '4':
// 编辑
break;
case '5':
// 详情
break;
case '6':
// 删除
break;
default:
break;
}
}
}
}
</script>

2 建立子组件,根据自己项目的实际需求,处理业务判断.

<template>
<div class="com_table_page">
<!-- table -->
<div class="common_table">
<el-table :data="tableData"
border
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection"
align="center"
width="50"
v-if="tableSelect">
</el-table-column>
<el-table-column align="center"
width='60'
v-if="tableRadio">
<template slot-scope="scope">
<el-radio v-model="radioStationVal"
:label="scope.row.id"
@change="radioChange(scope.row.id)">{{null}}</el-radio>
</template>
</el-table-column>
<el-table-column label="No"
align="center"
width="50">
<template slot-scope="scope">
<span v-text="(pageNum-1)*pageSize+(scope.$index+1)"></span>
</template>
</el-table-column>
<template v-for="(item, index) in tabCloum">
<!-- 操作列 -->
<slot v-if="item.slot"
:name="item.slot"></slot>
<!-- 普通列 -->
<el-table-column v-else
:key='index'
:label="item.label"
align="center">
<template slot-scope="scope">
<div v-if="scope.row[item.prop]==null||scope.row[item.prop]==''">
<span>-</span>
</div>
<div v-else>
<div v-if="item.ellipsisyi">
<el-tooltip :content="scope.row[item.prop]"
placement="top"
effect="light"
class="ellipsisyi">
<div>{{scope.row[item.prop]}}</div>
</el-tooltip>
</div>
<div v-else>
<span v-if="item.render" v-html="item.render(scope.row)"></span>
<span v-else
v-text="scope.row[item.prop]"></span>
</div>
</div>
</template>
</el-table-column>
</template>
</el-table>
</div>
<!-- 分页 -->
<div class="common_page"
v-show="total!=0">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="newPageNum"
:page-size="pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</template>

<script>
export default {
props: {
tableSelect: {
type: Boolean,
default: false
},//多选
tableRadio: {
type: Boolean,
default: false
},//单选
tableData: {
type: Array
},
tabCloum: {
type: Array
},
pageNum: {
type: Number
},
pageSize: {
type: Number
},
total: {
type: Number
}
},
data () {
return {
newPageNum: 1,
radioStationVal: ''
}
},
created () {
},
mounted () {
},
watch: {
pageNum (val) {
this.newPageNum = val
}
},
methods: {
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
},
// 当前页
handleCurrentChange (val) {
this.$emit('handleCurrentChange', val)
},
//多选框选择
handleSelectionChange (val) {
this.$emit('handleSelectionChange', val)
},
// 单选选事件
radioChange (id) {
this.$emit('radioChange', id)
}

}
}
</script>

觉得还不错,请帮忙点个赞,万分感谢.后续会陆陆续续出实用篇与技术篇的文章.也祝你在前端技术的路上越走越远.

• 点赞
• 收藏
• 分享
• 文章举报