vue+element中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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。