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.各位可以试一下. 升高: ...
随机推荐
- python(1):数据类型/string/list/dict/set等
本系列文章中, python用的idle是spyder或者pycharm, 两者都很好用, spyder 是在anaconda 中的, 自带了很多包可以用, pycharm 只是个编译器, 没有很多包 ...
- cf861D 字典树+时间戳
好久没碰字典树之类的题了,搞起来有点生疏 /* 把所有母串的后缀加入字典树中 然后再扫一次所有母串的后缀,把后缀放到字典树中查询,找到第一个访问次数为1的结点返回即可 num在计数时,同一个母串的子串 ...
- Python 9*9口诀
#!/usr/bin/env python # _*_ coding:utf-8 _*_ # Author:Liuyoushui # Time = 2017/7/18 10:33 print ('\n ...
- Spring4.x 基础
把以下 jar 包加入到工程的 classpath 下: 搭建Spring开发环境 Spring 的配置文件: 一个典型的 Spring 项目需要创建一个或多个 Bean 配置文件, 这些配置文件用于 ...
- java解析html的table
import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org. ...
- 自定义Spring标签
写了好几次了,结果一段时间之后就忘记了自己有写好的example,但是最后还是决定重新写一遍,把这个步骤记录下来 首先看整个项目结构 从transaction.xml开始,虽然图上报错了,实际上运行并 ...
- ASP.NET Core JWT认证授权介绍
using JWTWebApi.Models; using Microsoft.AspNetCore.Authentication.JwtBearer; using Microsoft.AspNetC ...
- Vs2015 本地git获取的代码目录文件修改后,启动提示error:Unable to start program “C:\Program Files\dotnet\dotnet.exe” 已解决.
http://stackoverflow.com/questions/39938453/unable-to-start-program-c-program-files-dotnet-dotnet-ex ...
- 使用Github Pages和Hexo构建个人博客
Github Pages可以创建免费的静态站点,支持自带主题.支持自制页面等,并且可以使用Jekyll或者Hexo等静态博客框架进行管理. 独立博客是博客园等博客平台之外的一个良好补充,相比使用虚拟主 ...
- 【CF724F】Uniformly Branched Trees
题意:询问n个点的每个非叶子点度数恰好等于d的不同构的无根树的数目. n≤1000,d≤10n≤1000,d≤10. 题解: 这题真的是一道非常好的题 首先考虑有根树 定义f[i][j][k]表示i个 ...