前言
主要是记录一下span-method的封装,在此过程中发现emit是无返回值的,这里的解决方案是使用回调函数来实现的。以后有好的方法在补充
完整代码
<template>
<el-table
:data="tableData"
:stripe='tableStripe'
:height='tableHeight'
:border='tableBorder'
:row-key='rowKey'
:highlight-current-row='tableHighlight'
:span-method="objectSpanMethod"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<el-table-column
type="selection"
width="55"
v-if='multiSelect'>
</el-table-column>
<el-table-column
label="序号"
width="55"
type='index'
v-if='indexFlag'>
</el-table-column>
<el-table-column
v-for='item in tableHeader'
:key='item.id'
:prop="item.prop"
:label="item.label"
:width="item.width"
>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'BaseTable',
props: {
// 表格线
tableBorder:{
type:Boolean,
default:true
},
// 表格间隔色
tableStripe:Boolean,
// 表格高度
tableHeight:[Number,String],
// 表格点击之后的高亮
tableHighlight:Boolean,
// 表格行数据的key
rowKey:{
type:String,
default:'id'
},
// 表格的列名
tableHeader: {
type:Array,
default:()=>{
return [
{label:'ID',prop:'id',width:180},
{label:'姓名',prop:'name',width:180},
{label:'数值',prop:'amount1',width:180},
]
}
},
// 表格数据
tableData:Array,
// 合并
rowColumnFlag:Boolean,
// 复选框
multiSelect:Boolean,
// 序号,默认
indexFlag:{
type:Boolean,
default:true
},
},
data(){
return {
rowAndColumn:[]
}
},
mounted(){
this.rowAndColumn = []
if(this.rowColumnFlag){
this.getRowColumn(this.tableData)
}
},
methods: {
// 合并条件
conditions(data,i){
let boolean = false
this.$emit('conditions',data,i,(val) => {
boolean = val;
})
return boolean
},
// 合并获取数据。这个写在父页面也可以的,不需要写方法的传值了
getRowColumn(data) {
// data就是我们从后台拿到的数据
let index = 0
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.rowAndColumn.push(1);
index= 0;
} else {
// 合并条件
if (this.conditions(data,i)) {
this.rowAndColumn[index] += 1;
this.rowAndColumn.push(0);
} else {
this.rowAndColumn.push(1);
index= i;
}
}
}
},
// 合并方法
objectSpanMethod({ rowIndex, columnIndex }) {
let obj = {
rowspan: 1,
colspan: 1
};
if (this.rowColumnFlag) {
this.$emit(
"spanMethod",
{ rowIndex, columnIndex },
this.rowAndColumn,
(val) => {
obj = val;
}
);
}
return obj
},
// 复选框,多选
handleSelectionChange(val) {
this.$emit('update:multipleSelection',val)
this.$emit('selectionChange',val)
},
// 单选
handleCurrentChange(val){
this.$emit('update:selected',val)
this.$emit('currentChange',val)
}
}
}
</script>
// 调用时,tableData是必填的,对于测试数据来说,其他可不填,只是记录合并方法
<base-table :tableData='tableData' @spanMethod='spanMethod' :rowColumnFlag='true' @conditions='conditions'></base-table>
// 测试数据
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
// 合并条件
conditions(data,i,callback){
callback(data[i].id % 2===0)
},
// 合并方法
spanMethod({ rowIndex, columnIndex },rowAndColumn,callback) {
let obj = {}
// 合并行
if (
(columnIndex === 0 ||
columnIndex === 1) &&
rowAndColumn.length > 0
) {
if (rowAndColumn[rowIndex]) {
let rowNum = rowAndColumn[rowIndex];
obj = {
rowspan: rowNum,
colspan: rowNum > 0 ? 1 : 0
};
} else {
obj = {
rowspan: 0,
colspan: 0
};
}
}else {
obj = {
rowspan: 1,
colspan: 1
};
}
// 合并列
// if (
// (rowIndex === 0 ||
// rowIndex === 1) &&
// rowAndColumn.length > 0
// ) {
// if (rowAndColumn[columnIndex]) {
// let rowNum = rowAndColumn[columnIndex];
// obj = {
// rowspan: rowNum > 0 ? 1 : 0,
// colspan: rowNum
// };
// } else {
// obj = {
// rowspan: 0,
// colspan: 0
// };
// }
// }else {
// obj = {
// rowspan: 1,
// colspan: 1
// };
// }
callback(obj)
},