关于vue.js:vueelement中table树形结构懒加载

1. 开发环境 vue+element
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们会遇到树形构造的表格, 因为数据量十分的多, 所以咱们须要点击父元素把对应的 id 传给后端, 那到子元素的数据, 造成树形, 上面我来分享一下如何实现。
4. 废话不多说, 间接上效果图:

5. 第一次申请后端返回的数据结构:

// isParent : 是否有子节点 

6. 需要:

// 点击父节点, 把父节点的 pid 传给后端, 后端返回子节点的数据 

7. 实现办法, 应用 element 的 table 的懒加载解决, 代码如下:

<el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
        :tree-props="{children:'children', hasChildren:'isParent'}"   // 要害代码
        row-key="id"
        lazy
        :load="load" // 要害代码
      >
    <el-table-column type="selection" width="55" fixed align="center"></el-table-column>
    <el-table-column prop="name" :label="$t('table.level')" align="center"></el-table-column>
    <el-table-column
          prop="isLeaf"
          :label="$t('table.upperlevel')"
          align="center"
        >
        <template slot-scope="scope">
            <p v-if="!scope.row.isLeaf">111</p>
        </template>
    </el-table-column>
    <el-table-column
          prop="Upperlevelpro"
          :label="$t('table.Upperlevelpro')"
          align="center"
        ></el-table-column>
    <el-table-column
          prop="show"
          :label="$t('table.Whetherenable')"
          align="center"
        >
        <template slot-scope="scope">
            <el-switch
              v-model="scope.row.show"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="0"
              inactive-value="1"
            ></el-switch>
            <!-- <el-button size="mini" @click="handleEdit(scope)">Edit</el-button> -->
        </template>
    </el-table-column>
    <el-table-column prop="Sort" :label="$t('table.Sort')" align="center"></el-table-column>
    <el-table-column
          prop="picture"
          :label="$t('table.picture')"
          align="center"
        >
        <template slot-scope="scope">
            <img :src="scope.row.picture" alt=""class="picture" />
            <!-- <el-button size="mini" @click="handleEdit(scope)">Edit</el-button> -->
        </template>
    </el-table-column>
    <el-table-column
          prop="name"
          :label="$t('table.operate')"
          width="220"
          align="center"
        >
        <template slot-scope="scope">
            <el-button size="mini" @click="tableadd(scope)">{{$t("tablebtn.add")
            }}</el-button>
            <el-button size="mini" @click="handleEdit(scope)">{{$t("tablebtn.edit")
            }}</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope)">{{$t("tablebtn.delete")
            }}</el-button>
        </template>
    </el-table-column>
</el-table>

load(row, treeNode, resolve) {console.log(row);
    treetable({
        pid: row.id,
        storeId: this.account.storeId,
    }).then((res) => {console.log("我是树形构造的表格接口");
        console.log(res);
        resolve(res.result);  // 应用懒加载的 resolve 办法
    });
},

8. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。