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.各位可以试一下. 升高: ...
随机推荐
- 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)
可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...
- Html页面添加百度地图
1.进入百度地图开放平台 http://lbsyun.baidu.com/ 2.进入右上角的 “API控制台” 在这里创建应用 并 获取密钥 3.进入 如下地址 创建地图 http://api.m ...
- Python(列表操作应用实战)方法二
# 输入一个数据,删除一个列表中的所有指定元素# 给定的列表数据data = [1,2,3,4,5,6,7,8,9,0,5,4,3,5,"b","a",&quo ...
- 目标检测算法之Fast R-CNN算法详解
在介绍Fast R-CNN之前我们先介绍一下SPP Net 一.SPP Net SPP:Spatial Pyramid Pooling(空间金字塔池化) 众所周知,CNN一般都含有卷积部分和全连接部分 ...
- thinkphp5.0和thinkphp3.2的区别不同之处
先看目录结构: thinkphp 5.0的目录结构, 文档:https://www.kancloud.cn/manual/thinkphp5/118008 project 应用部署目录 ├─appli ...
- Visual stuio2015 升级 Update 3+安装.Net Core 安装包之后，无法创建Mvc项目
原因: 怀疑是更新后缺少Web Frameworks and Tools 工具, 安装update3的时候提示异常 解决方法: 1.去微软 下载 Web Frameworks and Tools安装后 ...
- C#操作windows服务
本文主要说明了Windows服务的安装.卸载.启动.停止.获取服务安装路径.获取服务状态.检查服务是否存在.获取服务版本. 我们需要引用命名空间using System.Configuration.I ...
- alpha冲刺8/10
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之8 团队部分 后敬甲(组长) 过去两天完成了哪些任务 首页重新设计 课程时间线确定 答辩准备 接下来的计划 ...
- [转]docker安装elk
来源 https://www.jianshu.com/p/f549017c4b60 问题:virtual memory areas vm.max_map_count [65530] likely ...
- P2279 [HNOI2003]消防局的设立 贪心or树形dp
题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...