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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。