element-ui 树形表格懒加载

Updated on in 程序人生 with 0 views and 0 comments

1.el-tree属性设置

<el-tree
            ref="orgTree"
            :style="{height:autoHeight,'overflow':'auto'}"
            :props="orgTree.defaultProps"
            :load="loadOrgChildren"
            node-key="id"
            lazy
            class="filter-tree">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="node.label.length < 10"> {{ node.label }} </span>
              <el-tooltip v-else :content="node.label" class="item" effect="dark" placement="top-start">
                <span > {{ node.label | ellipsis(10) }} </span>
              </el-tooltip>
              <!--              <div>-->
              <!--                // 这里可以接着继续写内容来渲染，比如操作按钮编辑删除等-->
              <!--              </div>-->
            </span>
          </el-tree>

orgTree.defaultProps设置树属性

loadOrgChildren方法为数据加载方法

node-key="id"表示将数据中的id字段作为主键，不设置的话，默认整型主键自增

lazy启用懒加载

node-click指定点击触发事件

后面的span标签用来对超长文本做处理（ellipsis方法指定对超过10个子的文本做处理）

2.属性方法设置

data中添加

      orgTree: {
        defaultProps: {
          label: 'name',
          children: 'children',
          isLeaf: 'leaf'
        }
      },

isLeaf指定用数据中的leaf字段来判断当前节点是否是叶子节点

label指定用数据中的name字段作为当前节点的名称

children指定使用数据中的children字段作为子节点字段

具体参考最后的数据格式

methods中添加

loadOrgChildren(node, resolve) {
      if (node.level === 0) {
        getRoot({ 'orgId': '' }).then(res => {
          if (res.hasErrors === false) {
            resolve(res.data)
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      } else {
        console.log(node)
        getChildren({ 'orgId': node.data.id }).then(res => {
          if (res.hasErrors === false) {
            resolve(res.data)
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }
    },

getRoot方法加载根节点，getChildren方法获取当前节点的子节点

3.过滤超长文本

添加一个过滤器

filters: {
    ellipsis(value, len) {
      if (!value) return ''
      if (value.length > len) {
        return value.slice(0, len) + '...'
      }
      return value
    }
  },

<span v-if="node.label.length < 10"> {{ node.label }} </span>
              <el-tooltip v-else :content="node.label" class="item" effect="dark" placement="top-start">
                <span > {{ node.label | ellipsis(10) }} </span>
              </el-tooltip>

此处，如果文本小于10个字，则直接显示，如果文本超过10个子，则再过滤器中，将超出部分使用...替换，并用气泡展示完整数据

4.数据格式

获取根节点和获取子节点方法返回的数据格式都是一样的

{"status":200,"data":[{"children":[],"name":"云南","id":"408824016915136513","leaf":false},{"children":[],"name":"贵州","id":"416955951207154737","leaf":false},{"children":[],"name":"四川","id":"416955951207159180","leaf":false},{"children":[],"name":"广西","id":"416955951207167488","leaf":true}],"isOk":true,"errorMessage":null,"hasErrors":false,"code":"200","success":true}

<span v-if="node.label.length < 10">

标题：element-ui 树形表格懒加载
作者：wenyl
地址：http://www.wenyoulong.com/articles/2020/05/31/1590927376106.html

↑ ↓