element表格实现树形全选_Element UI 树形表格，TreeGrid或TreeTable实现

说明：

完全基于Element UI表格组件实现，通过对数据增加字段实现。

直接从工程里面拷的代码，需要自己梳理一下，图标用了font awesome。

先看效果图：

VUE文件代码：

查询条件：

过去

天

(注：0查询所有)

查询

{ { scope.row.categoryName }}

.statistics {

padding: 10px;

.hiddenRow {

display: none;

}

.searchForm{

padding: 10px;

span.label{

margin-right: 10px;

}

span.attention{

color: #e50021;

}

}

}

js文件代码：

import { commonService } from '@/service/commonService.js'

export default {

name: 'ContractStatistic',

data() {

return {

statisticDatas: [],

pastDays: 0

}

},

mounted() {

let self = this

self.loadStatisticData()

},

methods: {

_processLevelStatisticData(dataArray) {

let self = this

let resultArray = [] // 一级栏目

let level = 1

for (let i = 0; i < dataArray.length; i++) {

let item = dataArray[i]

// 查找一级分类

if (item.parentcategoryid === 0) {

item['level'] = level

resultArray.push(item)

self._loadChildrenData(resultArray, dataArray, item, level + 1)

}

}

return resultArray

},

_loadChildrenData(resultArray, originArray, item, level) {

let self = this

let deployed = 0

let undeployed = 0

let edit = 0

let completed = 0

for (let i = 0; i < originArray.length; i++) {

let originItem = originArray[i]

// 判断是否是item项的子项

if (originItem.parentcategoryid === item.categoryid) {

item['hasChildren'] = true

item['showChildren'] = false

originItem['level'] = level

originItem['visible'] = false // 子项默认隐藏

originItem['hiddenByCategory'] = false

resultArray.push(originItem)

self._loadChildrenData(

resultArray,

originArray,

originItem,

level + 1

)

// 应该放在统计完子类数据之后

deployed += originItem.deployed

undeployed += originItem.undeployed

edit += originItem.edit

completed += originItem.completed

}

}

// 计算子栏目统计合计

item.deployed += deployed

item.undeployed += undeployed

item.edit += edit

item.completed += completed

},

search() {

console.log(this.pastDays)

this.loadStatisticData()

},

loadStatisticData() {

let self = this

let params = {

pastDays: self.pastDays

}

commonService.getGeneralStatistics(params).then(function(response) {<