Table树形数据+懒加载

Element官方参考文档：https://element.eleme.cn/#/zh-CN/component/table

1、vue代码

<el-table  
	ref="multipleTable"  <!--获取dom树-->
	:data="taskList"   <!--表格数据-->
	row-key="taskId"   <!--表格行数据的key（数据主键）-->
  :indent="indent"   <!--展示树形数据时，树节点的缩进-->
  lazy 						  <!--是否懒加载子节点数据-->
 :load="load"        <!--加载子节点数据的函数-->
 <!--渲染嵌套数据的配置选项-->
 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
 @selection-change="handleSelectionChange" > <!--数据选择功能-->
          <el-table-column label="" align="center" prop="checked" width="50px" type="">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="handleCheckChange(scope.row)"/>
            </template>
          </el-table-column>
          
          <el-table-column label="任务名称"  prop="taskName"  width="350px"/>
          <el-table-column label="负责人" align="center" prop="leaderName"/>
          <el-table-column label="任务截止日期" align="center" prop="endTime">
            <template slot-scope="scope">
              <span>{{parseTime(scope.row.endTime,'{y}-{m}-{d}')}}</span>
            </template>
          </el-table-column>
          </el-table>
             <pagination
      			v-show="total>0"
      			:total="total"
      			:page.sync="queryParams.pageNum"
      			:limit.sync="queryParams.pageSize"
      			@pagination="getList"
    			/>

export default {
  name: "Task",
  components: { Treeselect },
  data() {
    return {
      indent: 20, // 缩进距离
      taskList: [],  // 任务表格数据
      ids: [],  // 表格选中数组
       },
  created() {
    this.getList();
    },
  methods: {
     /** 查询任务列表 */
    getList() {
      this.loading = true;
      listParentTask(this.queryParams).then(response => {
        this.taskList = response.rows;
        this.total = response.total;
      });
			
			//将列表数据中完成状态的数据默认勾选
      this.ids.forEach(key => {
        this.taskList.forEach(row => {
          if (row.taskId == key) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        })
      })
    },
    
    //懒加载子节点数据
    load(tree, treeNode, resolve) {
      getSubTask(tree.taskId).then(response => {
        resolve(response.data)
      })
    },
		
		// 单选框状态切换
    handleCheckChange(row) {
      let text = row.taskStatus === 0 ? "已完成" : "要重新打开";
      this.$confirm('确认' + text + '"' + row.taskName + '"任务吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return changeTaskCheck(row.taskId, row.taskStatus);
      }).then(() => {
        this.getList();
        this.msgSuccess("操作成功");
      }).catch(function() {
        row.checked = row.checked === true ? false : true;
      });
    },
  }
  };

注意：

树形结构展开箭头 >，是在第一列数据上（第一个<el-table-column/>中），想要放到第二列数据中，
第一个<el-table-column type="">中加入type=""，table中加入缩进属性:indent,data中设置缩进值。
缩进值控制子节点的数据缩进。
如果不需要懒加载，存在子节点数据的父节点数据中加入 children: [子节点list]，去掉懒加载属性。

2、后端代码

	/**
     * 查询父任务列表
     */
    @GetMapping("/parent/list")
    public TableDataInfo listParentTask(Task task)
    {
        startPage();
        List<Task> list = taskService.selectParentTaskList(task);
        return getDataTable(list);
    }
    /**
     * 查询子任务列表
     */
    @GetMapping("/subTask/list/{taskId}")
    public AjaxResult subTaskList(@PathVariable Long taskId)
    {
        Task task = new Task();
        task.setTaskId(taskId);
        List<Task> list = taskService.selectSubTaskList(task);
        return AjaxResult.success(list);
    }

实体类中需要加入

/**  是否存在子节点  */
private Boolean hasChildren;

	/**
     * 查询父任务列表
     * @param task
     * @return
     */
    @Override
    public List<Task> selectParentTaskList(Task task) {
    
        List<Task> list = taskMapper.selectParentTaskList(task);
        //处理数据是否勾选
        for (Task taskInfo : list) {
            if (taskInfo.getTaskStatus() == 1) {
                taskInfo.setChecked(true);
            } else {
                taskInfo.setChecked(false);
            }
            //查询是否存在子任务
            Integer num = taskMapper.selectSubTaskListByParentId(taskInfo.getTaskId());
            if (num>0){
                taskInfo.setHasChildren(true);
            }else{
                taskInfo.setHasChildren(false);
            }
        }
        return list;
    }

    /**
     * 查询子任务列表
     * @param task
     * @return
     */
    @Override
    public List<Task> selectSubTaskList(Task task) {
        List<Task> list = taskMapper.selectSubTaskList(task);
        //处理数据是否勾选
        for (Task taskInfo : list) {
            if (taskInfo.getTaskStatus() == 1){
                taskInfo.setChecked(true);
            }else{
                taskInfo.setChecked(false);
            }
        }
        return list;
    }