element树形table懒加载一分钟解读

最新推荐文章于 2024-08-16 07:34:44 发布

置顶江南冷少

最新推荐文章于 2024-08-16 07:34:44 发布

阅读量1.6k

点赞数 2

分类专栏： element table树懒加 element table懒加载 element 树形表懒加载文章标签： vue.js javascript html5 html es6

本文链接：https://blog.csdn.net/qq_41797911/article/details/109356849

版权

element table树懒加同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

element table懒加载

1 篇文章 0 订阅

订阅专栏

element 树形表懒加载

1 篇文章 0 订阅

订阅专栏

element树形table懒加载

1、效果图

在这里插入图片描述

静态数据格式

      tableData1: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true,
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'   
        },
        {
          id: 5,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 6,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 7,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 8,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 9,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]

动态数据格式

load (tree, treeNode, resolve) {
      if (treeNode) {
        setTimeout(() => {
          let treeNodeBuffer = [
            {
              id: Math.random()*20,//动态id  element官网例子没问题
              date: '2016-05-01',
              name: '王小虎',
              address: '有子集的数据',
              hasChildren: true
            },
            {
              id: Math.random()*20,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
          resolve(treeNodeBuffer)
        }, 1000)
      }
    }

html代码

   <el-table
      size="mini"
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column prop="date" label="地区名称" width="180">
      </el-table-column>
      <el-table-column prop="name" label="统一代码" width="180">
      </el-table-column>
      <el-table-column prop="address" label="级别"> </el-table-column>
      <el-table-column prop="address" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="value"
            active-color="rgb(24,144,255)"
            inactive-color="rgb(204,204,204)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="addChild"
            >新增子级</el-link
          >
          <span style="padding-right: 10px"></span>
          <el-link type="primary" :underline="false" @click="edit"
            >修改</el-link
          >
          <span style="padding-right: 10px"></span>
          <el-link type="primary" :underline="false" @click="del">删除</el-link>
        </template>
      </el-table-column>
    </el-table>