Vue+Element-UI+HTML实现Tree数据在Table的不同展示形式

一、展开收缩形式

1、效果图

2、数据结构

3、部分代码

<el-table
          :data="tableData"
          style="width: 80%;margin-left: 10%;margin-top: 10px;"
          border
          stripe
          highlight-current-row
          row-key="nodeId"
          size="mini"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :row-style="{height:'28px',fontSize:'12px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background:'#c0c4cc',color:'#000',fontSize:'12px'}"
          v-loading="isLoading">
  <el-table-column
                   prop="nodeName"
                   label="项目"
                   align="center">
  </el-table-column>
  <el-table-column
                   prop="nodeUnit"
                   label="单位"
                   align="center">
  </el-table-column>
  <el-table-column :label="planTitle" align="center">
    <el-table-column v-for="item in yearList" :key="item.title" :label="item.year" align="center"
                     :prop="item.title">
    </el-table-column>
  </el-table-column>

</el-table>

二、行合并形式

1、效果图

2、数据结构

3、部分代码

<el-table
          :data="tableData"
          style="width: 80%;margin-left: 10%;margin-top: 10px;"
          border
          stripe
          highlight-current-row
          row-key="nodeId"
          size="mini"
          :span-method="handleSpanMethod"
          :row-style="{height:'28px',fontSize:'12px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="headerStyle"
          v-loading="isLoading">
  <el-table-column
                   prop="nodeParentName"
                   label="类别"
                   align="center">
  </el-table-column>
  <el-table-column
                   prop="nodeName"
                   label="项目"
                   align="center">
  </el-table-column>
  <el-table-column
                   prop="nodeUnit"
                   label="单位"
                   align="center">
  </el-table-column>
  <el-table-column :label="planTitle" align="center">
    <el-table-column v-for="item in yearList" :key="item.title" :label="item.year" align="center"
                     :prop="item.title">
    </el-table-column>
  </el-table-column>

</el-table>

handleSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0) {
    const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
},
  filterData(arr, colIndex) {
    let spanOneArr = [];
    let concatOne = 0;
    arr.forEach((item, index) => {
      if (index === 0) {
        spanOneArr.push(1);
      } else {
        if (colIndex === 0) {
          if (item.nodeParentName === arr[index - 1].nodeParentName) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      }
    });
    return {
      one: spanOneArr,
    };
  },
    headerStyle({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        row[1].colSpan = 2 //第二个表头占两格
        row[0].colSpan = 0 //第一个表头占零格
      }
      if (rowIndex === 0 && columnIndex === 0) { //隐藏第一个表头
        return 'display: none'
      }
      return {background: '#c0c4cc', color: '#000', fontSize: '12px'};
    }

三、铺开展示

1、效果图

2、数据结构

3、部分代码

<el-table
                    :data="tableData"
                    style="width: 80%;margin-left: 10%;margin-top: 10px;"
                    border
                    stripe
                    highlight-current-row
                    row-key="nodeId"
                    size="mini"
                    :row-style="{height:'28px',fontSize:'12px'}"
                    :cell-style="{padding:'0px'}"
                    :header-cell-style="{background:'#c0c4cc',color:'#000',fontSize:'12px'}"
                    v-loading="isLoading">
                <el-table-column
                        prop="nodeSort"
                        label="序号"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="nodeName"
                        label="项目"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="nodeUnit"
                        label="单位"
                        align="center">
                </el-table-column>
                <el-table-column v-for="item in yearList" :key="item.title" :label="item.year" align="center"
                                 :prop="item.title">
                </el-table-column>
            </el-table>