el-table官方文档
el-table属性名 | 说明 | 类型 | 参数 |
summary-method | 自定义的合计计算方法 | Function | columns, data |
span-method | 合并行或列的计算方法 | Function | row, column, rowIndex, columnIndex |
合并表格行(通用)
const mergeObj = ref({}); // 用来记录需要合并行的下标
const mergeArr = ref(["statename"]); // 表格中的要合并列名
const tableData=ref([]);//网格数据//修改网格数据源
const mergeFun=()=>{mergeArr.value.forEach((key, index1) => {let count = 0; // 用来记录需要合并行的起始位置mergeObj.value[key] = []; // 记录每一列的合并信息tableData.value.forEach((item, index) => {// index == 0表示数据为第一行,直接 push 一个 1if (index === 0) {mergeObj.value[key].push(1);} else {// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位if (item[key] === data[index - 1][key]) {mergeObj.value[key][count] += 1;mergeObj.value[key].push(0);} else {// 如果当前行和上一行其值不相等count = index; // 记录当前位置mergeObj.value[key].push(1); // 重新push 一个 1}}});});
}const spanMethod = ({ row, column, rowIndex, columnIndex }) => {// 判断列的属性if (mergeArr.value.indexOf(column.property) !== -1) {// 判断其值是不是为0if (mergeObj.value[column.property][rowIndex]) {return [mergeObj.value[column.property][rowIndex], 1]} else {// 如果为0则为需要合并的行return [0, 0];}}
};//调用mergeFun()
合并表格底部行(“合计行”)中的某几列
const getSummaries = (param) => {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 1) {sums[index] = "合计";return;} const values = data.map((item) => Number(item[column.property]));if (!values.every((value) => Number.isNaN(value))) {sums[index] = `${values.reduce((prev, curr) => {const value = Number(curr);if (!Number.isNaN(value)) {return prev + curr;} else {return prev;}}, 0)}`;} else {sums[index] = "";}});return sums;
};//合并列
const spanMethod = (row, column, rowIndex, columnIndex) => {nextTick(() => {if (table.value.$el) {let current = table.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");let cell = current.rows[0].cells;//修改样式cell[1].style.textAlign = "center";// 合并单元格cell[2].style.display = "none";cell[1].colSpan = "2";}});
};
持续更新中。。。