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

最新推荐文章于 2024-07-29 14:49:14 发布

海蒂妈妈

最新推荐文章于 2024-07-29 14:49:14 发布

阅读量1k

点赞数

文章标签： element表格实现树形全选

本文链接：https://blog.csdn.net/weixin_42524610/article/details/112043614

版权

本文介绍如何使用Element UI的表格组件实现树形全选功能。通过增加数据字段并处理数据来构建树形结构，同时展示VUE和JS代码实现全选和展开折叠的逻辑。提供了一个数据集供测试查看效果。

摘要由CSDN通过智能技术生成

说明：

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

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

先看效果图：

VUE文件代码：

查询条件：

过去

天

(注：0查询所有)

查询

.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) {

let result = response.data

let resultArray = self._processLevelStatisticData(result)

self.statisticDatas = resultArray

})

rowClassNameHandler({ row, rowIndex }) {

// console.log(row['visible'])

let className = 'pid-' + row.parentcategoryid

if (

row.parentcategoryid !== 0 &&

(row['visible'] !== true || row['hiddenByCategory'] === true)

) {

className += ' hiddenRow'

}

return className

onExpand(row) {

let self = this

let isShowChildren = !row['showChildren']

row['showChildren'] = isShowChildren

self._loadAllSubItems(row, true, isShowChildren)

_loadAllSubItems(item, isFirstLevlChildren, isShowChilren) {

let self = this

let dataArray = []

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

let tempItem = self.statisticDatas[i]

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

if (isFirstLevlChildren) {

tempItem['visible'] = !tempItem['visible']

}

tempItem['hiddenByCategory'] = !isShowChilren

dataArray.push(tempItem)

let subItemArray = self._loadAllSubItems(

tempItem,

false,

isShowChilren

)

dataArray = dataArray.concat(subItemArray)

}

return dataArray

}

数据集(可以直接替换进去看效果)：

海蒂妈妈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫