1. 程式人生 > 其它 >element-ui table根據屬性合併行

element-ui table根據屬性合併行

注意:需要根據屬性進行排序

直接上程式碼:

<template>
  <el-table
    ref="table"
    :data="tableData"
    border
    :span-method="objectSpanMethod"
  >
    <el-table-column prop="project" label="檢測專案"> </el-table-column>
    <el-table-column prop="standard" label="檢測標準"> </el-table-column
> <el-table-column prop="method" label="檢測方法"> </el-table-column> <el-table-column prop="price" label="檢測價格"> </el-table-column> </el-table> </template>
export default {
  props: ["info"],
  setup(props, content) {

    const data = reactive({
      tableData: [],
      colSpanArr: [],
      rowIndexArr: [],
    });

    const getList 
= () => { // 請求資料 getColSpanData("project", data.tableData); } const getColSpanData = (prop, datas) => { let colLength = 1; datas.forEach((element, index) => { if (index == 0) { // rowIndex開始合併的位置為0,合併單元格數量預設為1 data.rowIndexArr.push(0); colLength
= 1; } else { if (element[prop] == datas[index - 1][prop]) { // 當相鄰兩條資料相等時,rowspan+1,即colLength+1 colLength += 1; // 當最後一條資料與倒數第2條不等式,在colSpanArr中push(1) if (index == datas.length - 1) { data.colSpanArr.push(colLength); } } else { // 相鄰兩條不等時push index和合並的長度 data.colSpanArr.push(colLength); data.rowIndexArr.push(index); if (index == datas.length - 1) { data.colSpanArr.push(1); } colLength = 1; } } }); data.rowIndexArr.push(datas.length); console.log(data.rowIndexArr, data.colSpanArr); // 結果分別是: //data.rowIndexArr:[0, 2, 5, 7, 9,10] //data.colSpanArr:[2, 3, 2, 2, 1] }; const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => { if (columnIndex === 0) { for (let i = 0; i < data.colSpanArr.length; i++) { //如果rowIndex和data.rowIndexArr[i]相等則開始合併,合併數量對應為data.colSpanArr[i] if (rowIndex === data.rowIndexArr[i]) { return { rowspan: data.colSpanArr[i], colspan: 1, }; } else { if ( rowIndex > data.rowIndexArr[i] && rowIndex < data.rowIndexArr[i + 1] ) { return { //被合併行則返回rowspan: 0, colspan: 0, //這裡被合併行為1,3,4,6,8 rowspan: 0, colspan: 0, }; } } } } }; } }