Element UI 树形表格，TreeGrid或TreeTable实现
安装less
npm install less --save-dev
npm install less-loader --save-dev
模板代码
<template>
<div class="statistics common-content">
<el-row class="searchForm">
<el-col :span="24">
<div class="grid-content">
<span class="label">查询条件：</span>
<span class="label">过去</span>
<el-input-number v-model="pastDays" controls-position="right" :min="0" :max="90"></el-input-number>
<span class="label">天</span>
<span class="attention">（注：0查询所有）</span>
<el-button type="primary" @click="search">查询</el-button>
</div>
</el-col>
</el-row>
<el-table :data="statisticDatas" border style="width: 100%;" size="medium" :row-class-name="rowClassNameHandler">
<el-table-column label="分类名称" width="460" align="left" show-overflow-tooltip>
<template slot-scope="scope">
<span :style="{marginLeft: scope.row.level * 23 + 'px'}"> </span>
<i v-if="scope.row.showChildren" :class="{'fa fa-folder-open':scope.row.showChildren, 'fa fa-file-o':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i>
<i v-else :class="{'fa fa-folder':scope.row.hasChildren, 'fa fa-file-o':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i>
<span :data-level="scope.row.level" :style="{marginLeft: 4 + 'px'}">{{ scope.row.categoryName }}</span>
</template>
</el-table-column>
<el-table-column prop="categoryid" label="分类ID" width="80" align="center"></el-table-column>
<el-table-column prop="parentcategoryid" label="父类ID" width="80" align="center"></el-table-column>
<el-table-column prop="undeployed" label="模板（未发布）" align="left"></el-table-column>
<el-table-column prop="deployed" label="模板（已发布）" align="left"></el-table-column>
<el-table-column prop="edit" label="合同实例（编辑中）" align="left"></el-table-column>
<el-table-column prop="completed" label="合同实例（完成）" align="left"></el-table-column>
</el-table>
</div>
</template>
<script>//引用js代码</script>
<style lang="less">
.statistics {
padding: 10px;
.hiddenRow {
display: none;
}
.searchForm{
padding: 10px;
span.label{
margin-right: 10px;
}
span.attention{
color: #e50021;
}
}
}
</style>
js代码
<script>
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
}
let result = [
{
"parentcategoryid": 0,
"edit": 0,
"undeployed": 1,
"deployed": 0,
"completed": 0,
"categoryName": "商业管理类",
"categoryid": 1105
},
{
"parentcategoryid": 0,
"edit": 0,
"undeployed": 0,
"deployed": 1,
"completed": 0,
"categoryName": "研发设计类",
"categoryid": 1117
},
{
"parentcategoryid": 0,
"edit": 0,
"undeployed": 3,
"deployed": 0,
"completed": 0,
"categoryName": "行政管理类",
"categoryid": 1901
},
{
"parentcategoryid": 0,
"edit": 0,
"undeployed": 6,
"deployed": 0,
"completed": 0,
"categoryName": "哈哈",
"categoryid": 2402
},
{
"parentcategoryid": 0,
"edit": 10,
"undeployed": 2,
"deployed": 21,
"completed": 5,
"categoryName": "测试分类",
"categoryid": 3201
},
{
"parentcategoryid": 0,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "临时创建",
"categoryid": 4901
},
{
"parentcategoryid": 1,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "哈哈2",
"categoryid": 3403
},
{
"parentcategoryid": 1,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "lzk",
"categoryid": 3739
},
{
"parentcategoryid": 1,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test",
"categoryid": 3740
},
{
"parentcategoryid": 1,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "122",
"categoryid": 4201
},
{
"parentcategoryid": 1,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "招标材设类（模板包）",
"categoryid": 4602
},
{
"parentcategoryid": 1101,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "111",
"categoryid": 1102
},
{
"parentcategoryid": 1101,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "11",
"categoryid": 1103
},
{
"parentcategoryid": 1103,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "111",
"categoryid": 1104
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "财务",
"categoryid": 1106
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "销售",
"categoryid": 1109
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "信息",
"categoryid": 1110
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "运营",
"categoryid": 1111
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "合同",
"categoryid": 1112
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "重庆",
"categoryid": 1114
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "长沙",
"categoryid": 1115
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "成都",
"categoryid": 1121
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "武汉",
"categoryid": 1122
},
{
"parentcategoryid": 1105,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "合同模板管理",
"categoryid": 1902
},
{
"parentcategoryid": 1106,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "税务",
"categoryid": 1107
},
{
"parentcategoryid": 1114,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "222",
"categoryid": 2801
},
{
"parentcategoryid": 1114,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "555",
"categoryid": 2902
},
{
"parentcategoryid": 1114,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "111",
"categoryid": 2903
},
{
"parentcategoryid": 1114,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "不能没有名称啊",
"categoryid": 2904
},
{
"parentcategoryid": 1117,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "解决哈哈啥哈",
"categoryid": 1601
},
{
"parentcategoryid": 1117,
"edit": 0,
"undeployed": 0,
"deployed": 1,
"completed": 2,
"categoryName": "主合同",
"categoryid": 2701
},
{
"parentcategoryid": 1601,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "测试",
"categoryid": 2601
},
{
"parentcategoryid": 1902,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "商业管理类",
"categoryid": 1903
},
{
"parentcategoryid": 1902,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "研发设计类",
"categoryid": 1904
},
{
"parentcategoryid": 1902,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "招标材设类",
"categoryid": 1905
},
{
"parentcategoryid": 2402,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "总包",
"categoryid": 2403
},
{
"parentcategoryid": 2403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "主合同",
"categoryid": 2404
},
{
"parentcategoryid": 2403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "合同附件",
"categoryid": 2405
},
{
"parentcategoryid": 2403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "工程标准",
"categoryid": 2406
},
{
"parentcategoryid": 2601,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "测试技术框架是否是",
"categoryid": 3001
},
{
"parentcategoryid": 2801,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "55555555555",
"categoryid": 2802
},
{
"parentcategoryid": 2801,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "222",
"categoryid": 2901
},
{
"parentcategoryid": 2802,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "6666666666",
"categoryid": 2803
},
{
"parentcategoryid": 3201,
"edit": 7,
"undeployed": 0,
"deployed": 3,
"completed": 3,
"categoryName": "222",
"categoryid": 3906
},
{
"parentcategoryid": 3201,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "5",
"categoryid": 3907
},
{
"parentcategoryid": 3201,
"edit": 0,
"undeployed": 6,
"deployed": 0,
"completed": 0,
"categoryName": "6",
"categoryid": 3908
},
{
"parentcategoryid": 3201,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "附件迁移测试",
"categoryid": 4501
},
{
"parentcategoryid": 3201,
"edit": 6,
"undeployed": 0,
"deployed": 2,
"completed": 1,
"categoryName": "模板测试",
"categoryid": 4601
},
{
"parentcategoryid": 3201,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "11",
"categoryid": 4702
},
{
"parentcategoryid": 3201,
"edit": 0,
"undeployed": 1,
"deployed": 0,
"completed": 0,
"categoryName": "测试1",
"categoryid": 4802
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "11111",
"categoryid": 3708
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "11113",
"categoryid": 3711
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test2",
"categoryid": 3721
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test2",
"categoryid": 3732
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test2",
"categoryid": 3733
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test2",
"categoryid": 3734
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test2",
"categoryid": 3735
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "1",
"categoryid": 3743
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test99",
"categoryid": 3747
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test98",
"categoryid": 3748
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test97",
"categoryid": 3749
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "test01",
"categoryid": 3802
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "88",
"categoryid": 3909
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "999",
"categoryid": 4002
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "2",
"categoryid": 4202
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "3",
"categoryid": 4203
},
{
"parentcategoryid": 3403,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "上升",
"categoryid": 4701
},
{
"parentcategoryid": 3740,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "222",
"categoryid": 3746
},
{
"parentcategoryid": 3743,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "1",
"categoryid": 3744
},
{
"parentcategoryid": 4201,
"edit": 0,
"undeployed": 0,
"deployed": 0,
"completed": 0,
"categoryName": "77777",
"categoryid": 4404
}
]
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
}
}
}
</script>
Element UI 树形表格，TreeGrid或TreeTable实现的更多相关文章
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- element UI 调整表格行高
使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
- vue element UI el-table 表格调整行高的处理方法
这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...
随机推荐
- Nginx详解二十六：Nginx架构篇之性能优化
一.性能优化考虑点 1.当前系统结构瓶颈 通过压力测试观察指标.日志检测.性能分析 2.了解业务模式 接口业务类型.系统层次化结构 3.性能与安全 二.ab接口压力测试工具 1.安装:yum -y i ...
- shell 脚本加密
日常编写shell脚本时会写一些账号和密码写入脚本内,但是不希望泄露账号密码,所以对shell脚本进行加密变成可执行文件. 主要使用 shc 对 Linux shell 脚本加密,shc是一个专业的加 ...
- python面向对象三大特性之封装
一. 概述 定义:隐藏对象的属性和实现细节,仅对外提供公共访问方式 封装的原则:把不需要对外提供的内容都隐藏起来,提供公共的方法访问这些隐藏属性 二.封装手段 使用双下划线将属性和方法隐藏起来 cla ...
- Just oj 2018 C语言程序设计竞赛（高级组）F:Star（结构体排序+最小生成树）
F: Star Time Limit: 1 s Memory Limit: 128 MB Submit My Status Problem Description 31世纪,人类世界的科技已 ...
- 将Elasticsearch的快照备份到HDFS
1.安装Elasticsearch插件repository-hdfs 下载地址:https://artifacts.elastic.co/downloads/elasticsearch-plugins ...
- Quartz.net 2.4.1 使用记录
项目需要开发一个调度任务工具,用于
- sharepoint2013 Restore-SPSite 报错，采用数据库还原
PS C:\Users\spadmin> Restore-SPSite http://hz0xw002049:8099 -Path D:\20170731MossSiteSP.bak -Forc ...
- Nodejs通过账号密码连接MongoDB数据库
转自https://blog.csdn.net/szu_lzz/article/details/77435804#commentBox 1.创建管理员 首先开启Mongo服务,然后切换admin数据库 ...
- 【loj6029】「雅礼集训 2017 Day1」市场&&【uoj#228】基础数据结构练习题
题解: 这两道题加上区间取min max应该算线段树几道比较不寻常的题目 其实也是挺好理解的 对于区间/d 显然在log次后就会等于0 而我们注意到如果区间中数都相等那么就可以一起除 也就是说每个区间 ...
- BeautifulSoup下Unicode乱码解决
今天在用scrapy爬某个网站的数据,其中DOM解析我用的是BeautifulSoup,速度上没有XPath来得快,不过因为用了习惯了,所以一直用的bs,版本是bs4 不过在爬取过程中遇到了一些问题, ...