el-table组件的封装
前言：仔细看懂本篇博客，玩转element table 不成问题 ，个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。
其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。
就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。
该组件封装适应于绝大多数table列表，可以自定义列
废话不多说看下例子
先上子组件代码
{{ row.muBanMC }}
{{ value.text }}
再上父组件代码
再上mixins/tableInfo.js代码
import mockData from './mockData'
export default {
data() {
return {
// 获取列表前是否loading加载
loading: false,
// 搜索查询的参数
searchParams: {
pageNum: 1,
pageSize: 10
},
// table数据源
tableData: mockData,
// 表格项绑定的属性
columns: [
{
prop: 'title',
label: '审核描述',
minWidth: '100px',
align: 'center',
formatter: row => (row.title ? row.title : '暂无标题')
},
{
prop: 'statusDesc',
minWidth: '100px',
align: 'center',
label: '审核状态'
},
{
prop: 'createBy',
minWidth: '100px',
align: 'center',
label: '申请人'
},
{
sortable: 'custom',
prop: 'createdTime',
minWidth: '100px',
align: 'center',
label: '申请时间'
},
{
prop: 'auditBy',
minWidth: '100px',
align: 'center',
label: '审核人'
},
{
minWidth: '100px',
align: 'center',
prop: 'auditTime',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'A',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'B',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'C',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'D',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
},
{
minWidth: '100px',
align: 'center',
prop: 'E',
label: '审核时间'
}
],
// 表格绑定的属性
tableInfo: {
stripe: true,
'highlight-current-row': true // 选中行高亮
},
events: {
'row-dblclick': row => {
//双击表格项触发的函数
console.log(row)
},
'row-click': row => {
// 单机表格项触发的函数
console.log('row', row)
}
},
// 操作列
operations: [
{
text: '编辑',
isShow: row => true, // 是否展示
isDisable: row => true, // 是否禁用
type: 'text',
class: 'el-text-color',
callback: row => {
this.handleAddOrEdit('edit', row)
}
}
],
total: 0
}
},
mounted() {},
methods: {
// 每也条数改变
handleSizeChange(pageSize) {
this.searchParams.pageSize = pageSize
},
// 改变页数
handleCurrentChange(pageNum) {
this.searchParams.pageNum = pageNum
},
handleAddOrEdit(type, row) {
if (type === 'edit') {
this.visible = true
this.infoData = row
}
}
}
}
假数据mockData（不用管）
export default [
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
},
{
title: 'A',
statusDesc: 1,
createBy: '甲',
createdTime: '2023-01-01 23:59:59',
auditBy: '乙',
auditTime: '2023-01-02 23:59:59'
}
]
最后附上效果图
