elementui表格el-table-树形数据-数据重构

经常会遇到各种分类列表的展示，并且类别还是多级的，这时就需要使用elmentui表格中的树形数据进行展示。具体代码如下：

1.HTML代码

<div class="washing-box">
  <el-button
    size="small"
    type="primary"
    style="margin-bottom: 10px"
    @click="addType"
    >+添加分类</el-button
  >
  <el-button
    v-if="!isExpand"
    size="small"
    style="width: 100px; background-color: #fff"
    @click="openRow()"
    >+展开全部</el-button
  >
  <el-button
    v-if="isExpand"
    size="small"
    style="width: 100px; background-color: #fff"
    @click="foldRow()"
    >+折叠全部</el-button
  >
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    v-loading="loading"
    border
    row-key="id" 
    default-expand-all
    :tree-props="{ children: 'children' }" 
  >
    <el-table-column label="分类名称" prop="title"></el-table-column>
    <el-table-column prop="partyTypeId" label="分类编号" align="center">
    </el-table-column>
    <el-table-column prop="sortIdx" label="排序" align="center">
    </el-table-column>
    <el-table-column prop="deleteFlag" label="状态" align="center">
      <template slot-scope="scope">
        <div
          :style="{ color: scope.row.deleteFlag ? '#FF5C58' : '#606266' }"
        >
          {
    
    { scope.row.deleteFlag ? "禁用" : "有效" }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="createUser" label="创建人" align="center">
    </el-table-column>
    <el-table-column label="创建时间" prop="createTime" align="center">
      <template slot-scope="scope">{
    
    {
        moment(scope.row.createTime).format("YYYY-MM-DD")
      }}</template>
    </el-table-column>
    <el-table-column label="更新时间" prop="updateTime" align="center">
      <template slot-scope="scope">{
    
    {
        moment(scope.row.updateTime).format("YYYY-MM-DD")
      }}</template>
    </el-table-column>
    <el-table-column
      prop="operation"
      label="操作"
      width="150"
      align="center"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <el-button type="text" @click="handleIsValid(scope)"
          >{
    
    {
          scope.row.deleteFlag ? "启用" : "禁用"
        }}</el-button
        >
        <el-button type="text" @click="handleDelete(scope)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

结构主要重点为：1.可展开/折叠分类子级；2.可对分类进行禁用/启用；

注意：渲染树形数据时，必须要指定row-key，以及tree-props属性。

2.JS代码

data(){
  return {
    loading: false,
    tableData: [],
    isExpand: true, //是否展开
    options: [], // 父级分类数据
  };
},
methods: {
  // 获取分类列表的方法
  getTypeList() {
    this.loading = true;
    // 替换成你自己的接口即可
    this.$axios({
      url: this.$apiUrl + "/custs/partyType/tree",
      method: "get",
    }).then((res) => {
      console.log(res);
      this.loading = false;
      this.tableData = (res && res.data && res.data.data) || [];
      this.options = this.tableData.map((r) => this.mapTree(r));
    });
  },
  // 将从后台获取的数据进行重构成，符合树形结构的数据（重点）
  mapTree(item) {
    // 判断当前对象中是否含children属性，且该属性具有值
    const haveChildren =
      Array.isArray(item.children) && item.children.length > 0;
    // 如果存在则对其children继续下一层级的数据map
    if (haveChildren) {
      return {
        value: item.id,
        label: item.title,
        children: item.children.map((r) => mapTree(r)),
      };
    // 不存在，则当前对象只需value和label属性值（注意不要children:[]，这样会报错）
    } else {
      return {
        value: item.id,
        label: item.title,
      };
    }
  },
  // 切换树形结构展开折叠方法（重点）
  toggleRowExpansion(arr, isExpand) {
    this.isExpand = isExpand;
    if (arr.length != 0) {
      arr.forEach((item) => {
        // toggleRowExpansion()方法是elementui表格方法，用于切换树形表格某一行的展开状态
        this.$refs.multipleTable.toggleRowExpansion(item, isExpand);
        if (item.children) {
          this.toggleRowExpansion(item.children, isExpand);
        }
      });
    }
  },
  // 展开全部的方法
  openRow() {
    this.toggleRowExpansion(this.tableData, true);
  },
  // 折叠全部的方法
  foldRow() {
    this.toggleRowExpansion(this.tableData, false);
  },
  // 禁用方法
  handleIsValid({ row }) {
    // 替换成你自己的接口及对应信息即可 
    this.$axios({
      url: this.$apiUrl + "/custs/partyType/disable",
      method: "post",
      data: {
        id: row.id,
      },
    }).then((res) => {
      if (res && res.data && res.data.code == 200) {
        this.$message({
          message: row.deleteFlag ? "启用成功" : "禁用成功",
          type: "success",
        });
      }
      this.getTypeList();
    });
  },
},

 重要的方法有：1.对数据结构的处理；2.对表格数据的展开/折叠

3. 效果图