表格合併,遠程排序，動態展開行

開發中頁面有表格的話，不可或缺的都會涉及一些別表格的合併操作。
下面來說說我是如何來動態合併表格的行或列的。 點擊查看源碼。

表格合併

看圖說話

後臺傳給前臺的是一個二維數組形式的數據，遍歷這個二維數組，生成多個表格，合理的使用表格的show-header屬性，來顯示和隱藏表頭，然後再合併每個表格。合併表格時用到了列表數據裏的length屬性，這個字段很重要，屬性值是列表的長度。

通過這個length來實現表格動態合併行

遠程排序

<el-table
  :data="tableData1"
  border
  @sort-change="sortChange"
  :default-sort = "{
    prop: 'date',
    order: 'descending',
  }"
  style="width: 100%">
  <el-table-column
  prop="date"
  label="日期"
  sortable="custom"
  :sort-orders="['ascending', 'descending']"
  width="180">
  </el-table-column>
  <el-table-column
  prop="name"
  label="姓名"
  width="180">
  </el-table-column>
  <el-table-column
  prop="address"
  label="地址">
  </el-table-column>
</el-table>

private sortChange({ column, prop, order }: any) {
    const defaultSort = {
      prop, // 排序字段
      order, // 排序類型
    };
    // 此處調用接口，並把排序字段和排序類型傳給後端
    // ...
  }

1. 對應列是否可以排序，通過添加sortable字段來控制，如果希望是遠程排序，則該字段的值設置爲’custom’；
2. 排序需要監聽 Table 的 sort-change 事件，通過該事件能拿到當前排序的字段和排序的類型；
3. sort-orders屬性設置排序的類型，默認有’ascending’，‘descending’，null，分別代表升序、降序、不排序；
4. default-sort屬性設置默認排序字段和默認排序類型

動態展開某些行

<el-table
  :data="tableData1"
  row-key="id"
  :row-class-name="setClassName"
  style="width: 100%">
  <el-table-column
  type="expand">
  <template slot-scope="props">
    我是擴展內容：{{props.row.remark}}
  </template>
  </el-table-column>
  <el-table-column
  prop="date"
  label="日期"
  width="180">
  </el-table-column>
  <el-table-column
  prop="name"
  label="姓名"
  width="180">
  </el-table-column>
  <el-table-column
  prop="address"
  label="地址">
  </el-table-column>
</el-table>

private setClassName({row, index}: any){
    // 通過自己的邏輯返回一個class或者空
    return row.expand ? 'expand' : '';
  }

.expand .el-table__expand-column .cell {
  display: none;
}

1. 渲染樹形數據時，必須要指定 row-key；
2. 通過 row-class-name 屬性來設置行樣式；