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

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

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

请先看效果:

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

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

处理前：

处理后：

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

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

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

完整的代码：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :select-on-indeterminate="true"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange"
      ref="multipleTable"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄