elementui表格動態資料單元格合併

音浪小姐姐發表於2019-03-07
UI

elementui官網的表格單元格合併方法是針對靜態資料的，判斷是寫死的。

elementui表格動態資料單元格合併

rowspan是合併的行數：為1表示不變；為0表示去除該單元格，後面的單元格會向上往這格填； colspan同理

而實際情況表格資料往往是動態的。

現如下圖，需要將表格前四列的相同資料項合併。

elementui表格動態資料單元格合併

直接上程式碼：

<el-table :data="budgetList" border :span-method="objectSpanMethod" highlight-current-row height="100%">
    <el-table-column prop="accName" label="會計科目"></el-table-column>
    <el-table-column prop="unemploy" label="失業保險"></el-table-column>
    <el-table-column prop="employ" label="就業專項"></el-table-column>
    <el-table-column prop="deptOrgName" label="科室"></el-table-column>
    <el-table-column prop="projectName" label="專案"></el-table-column>
    <el-table-column prop="budgetaryAmount" label="金額"></el-table-column>
    <el-table-column prop="moneySource" label="資金渠道" :formatter="columnFormat"></el-table-column>
</el-table>
複製程式碼
export default {
    data() {
      return {
        budgetList: [],//表格
        spanArr: [],//二維陣列，用於存放單元格合併規則
        position: 0,//用於儲存相同項的開始index
      }
    }
複製程式碼
methods: {
      //表格
      budgetListInit() {
        let para = {};
        this.$http({
            method: "post",
            url: "...",
            data: para
          })
          .then(res => {
            this.budgetList = res.data || [];
            this.rowspan(0,'accName');
            this.rowspan(1,'unemploy');
            this.rowspan(2,'employ');
            this.rowspan(3,'deptOrgName');
          })
          .catch(err => {});
      },
      
      rowspan(idx, prop) {
        this.spanArr[idx] = [];
        this.position = 0; 
        this.budgetList.forEach((item,index) => {
          if( index === 0){
            this.spanArr[idx].push(1);
            this.position = 0;
          }else{
            if(this.budgetList[index][prop] === this.budgetList[index-1][prop] ){
              this.spanArr[idx][this.position] += 1;//有相同項
              this.spanArr[idx].push(0); // 名稱相同後往陣列裡面加一項0
            }else{
              this.spanArr[idx].push(1);//同列的前後兩行單元格不相同
              this.position = index;
            }
          }
        })
      },
      //表格單元格合併
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        for(let i = 0; i<4; i++) {
          if(columnIndex === i){
            const _row = this.spanArr[i][rowIndex];
            const _col = _row>0 ? 1 : 0;
            // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
            return {
              rowspan: _row,
              colspan: _col
            }
          }
        }
      },
    }
複製程式碼

That's all !

相關文章