【vue3】el-table树形列表展示数据

效果图：

 

页面代码: element-plus的table表格树形数据与懒加载

<div class="userData">
      <el-table
        :data="userData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        lazy
        :load="load"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="title" label="菜单名称"> </el-table-column>
        <el-table-column prop="icon" label="状态"> </el-table-column>
        <el-table-column prop="url" label="地址"> </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <el-button
              type="success"
              size="small"
              @click="changeDialog(scope.row)"
              >修改</el-button
            >
            <el-button
              type="warning"
              size="small"
              @click="resetPasswords(scope.row)"
              >增加子菜单</el-button
            >
            <el-button type="danger" size="small" @click="addDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

后台接口数据渲染：

 代码：将接口数据给页面绑定的:data="userData"

 const DataList = () => {
      getSysroleGetListByPage({
        name: state.userForm.name,
      }).then((res) => {
        if (res.data.code == "0") {
          state.userData = res.data.body.data;
        }
      });
    };

注意点：

ElementUI的表格树（树型结构表格），很简单方式，el-table只需要小小改动几个地方 - pz_ww - 博客园