vue table树形结构 通过parentId是否为0 设置hasChildren

设置 Table 的 lazy 属性为 true 与加载函数 load 。
通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点.
children 与 hasChildren 都可以通过 tree-props 配置。
且两者不能同时存在，hasChildren 为true时需要将children 设置[]

	<el-table
			:data="list"
			lazy
			row-key="indicatorInfoId"
			v-loading="loading"
			:load="loadTreeData"//加载子树数据的方法，仅当 lazy 属性为true 时生效
			highlight-current-row
			default-expand-all //是否展开所有子节点 默认fasle
			@row-click="tableRowClassName"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
		..........
		</el-table>

			loadTreeData(tree, treeNode, resolve) {
			//tree 当前渲染的数据
			//el-table 写的属性 如 expanded: false, hasChildren: true
			// indent: 0,（第几层） level: 0,(展示树形数据时，树节点的缩进)
			// loaded: false,rowKey:'222'
				const { rowKey, level } = treeNode;
				const pId = rowKey;
				this.$http({
					url: this.$http.adornUrl(detectionApi.product.sclistUrl()),
					method: "get",
					params: this.$http.adornParams({
						parentId: pId
					})
				}).then(data => {
					if (!data) return false;
					const dataList = treeDataTranslate(data, "indicatorInfoId", "parentId");
					dataList.map(item => {
						item.children = [];
						item.hasChildren = true;
						return item;
					});
					resolve(dataList);
				});
			},
		getData() {
				this.loading = true;
				this.$http({
					url: this.$http.adornUrl(detectionApi.product.sclistUrl()),
					method: "get",
					params: this.$http.adornParams()
				}).then(data => {
					if (data) {
						const dataList = data;
						if (this.treeParams.length > 0) {
							const transData = treeDataTranslate(dataList, ...this.treeParams);
							this.list = this.lazyLoad
								? getFirstLevelTreeData(transData)
								: transData;
						} else {
							this.list = dataList;
						}
					}
				});
				this.loading = false;
			},

treeDataTranslate.js

export function treeDataTranslate(data, id = "id", pid = "parentId") {
  var res = [];
  var temp = {};
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i];
    delete temp[data[i][id]].children;
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]["children"]) {
        temp[data[k][pid]]["children"] = [];
        temp[data[k][pid]]["hasChildren"] = false;
      }
      if (!temp[data[k][pid]]["_level"]) {
        temp[data[k][pid]]["_level"] = 1;
      }
      data[k]["_level"] = temp[data[k][pid]]._level + 1;

      temp[data[k][pid]]["children"].push(data[k]);
      temp[data[k][pid]]["hasChildren"] = true
    } else {
      res.push(data[k]);
    }
  }
  return res;
}

getFirstLevelTreeData.js

// 生成树形结构一级菜单数据
export const getFirstLevelTreeData = data => {
  let _cloneData = [...data];
  return _cloneData.map(item => {
    return {
      ...item,
      children: [],
      // TODO: 后端返回的hasChild字段不正确 总是false
      hasChildren: true
    };
  });
};