第九篇 Elementui 树形表格多选问题-多级树形表格懒加载复选框勾选问题

前言： 个人在做项目中，使用到了 Elementui 组件库中的树形表格，其中的需求就是要能够做到多选的功能。使用官网的例子，只有一层的多选，不能做到多层的勾选。无法满足开发的需要，

本文做的就是分享： 1.一次性展示的数据进行多选  2.懒加载的获取的数据的多选  的实现

请先看效果:

1.一次性展示的数据进行多选：

2.懒加载后获取的数据的多选

处理前：

处理后：

1.一次性展示的数据进行多选

这种情况是一次性从后端接口取回了显示的数据，主要使用到的方法如下：--->可到ElementUi官网查看功能：ElementUi官方文档

      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange"

完整的代码：

2.懒加载的获取的数据的多选

注意点：懒加载之后出现的数据，在 tableData 里面的没有的，所以本文标注了下 处理前和处理后，请详细阅读如下：

懒加载取到的数据，若是不重新赋值给 tableData 对象，在 tableData 中是不会显示这部分数据的。

最主要最主要的一点代码：

将懒加载获取的数据，重新赋值给当前父节点的 children 字段。

      this.$nextTick(() => {
        row.children = loadData
      })

全量代码：

懒加载函数也可以这么写：

 async loadSearch(row, treeNode, resolve) {
      const loadData = [
        {
          id: 3100,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 3200,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ]
      await setTimeout(() => {
        resolve(loadData)
      }, 2000)
      await this.setNewRowData(row, loadData)
    },
    setNewRowData(row, loadData) {
      row.children = loadData
    }

接下来就可以在上面的函数中取到勾选的数据了：

    selectionChange(val) {
      console.log(val)
    },

 

最后，希望能帮助到您，感谢。

上一篇：第八篇：node简单使用 nodemailer+node-schedule 实现定时发送邮件

下一篇：第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据