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.各位可以试一下. 升高: ...
随机推荐
- JAVA菜鸟入门HelloWorld
一:HelloWorld进入菜鸟心中 1.最原始的一切从HelloWorld开始 首先本机安装JDK,配置好path环境变量 用文本编辑器editplus或notepad++创建一个HelloWorl ...
- Python使用re模块实现正则表达式操作
Python提供了re模块,用于实现正则表达式的操作.在实现时,可以使用re模块提供的方法(如search().match().findall()等)进行字符串处理,也可以先使用re模块的compil ...
- Axure实现多用户注册验证
*****多用户登录验证***** 一.(常规想法)方法:工作量较大,做起来繁琐 1.当用户名和密码相同时怎么区分两者,使用冒号和括号来区分: eg. (admin:123456)(123456:de ...
- webpack+vue打包之后输出配置文件修改接口文件
用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,but,难道我们只是改个接口地址也要重新打包吗?当然不行了,那就太麻烦了,怎么 ...
- SQL Server索引误区使用建议
常见的误区: 1.数据库不需要索引 2.主键总是聚集的 3.联机索引操作不引起阻塞 4.复合索引下列的顺序不重要 5.聚集索引以物理顺序存储 6.填充因子可以应用在索引的插入过程中 7.每个表应该有聚 ...
- 小甲鱼python基础教程飞机大战源码及素材
百度了半天小甲鱼python飞机大战的源码和素材,搜出一堆不知道是什么玩意儿的玩意儿. 最终还是自己对着视频一行行代码敲出来. 需要的同学点下面的链接自取. 下载
- 494. Target Sum
You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...
- 一脸懵逼学习keepalived（对Nginx进行热备）
1:Keepalived的官方网址:http://www.keepalived.org/ 2:Keepalived:可以实现高可靠: 高可靠的概念: HA(High Available), 高可用性集 ...
- codeforces 1037
题解: E-trips 哎哎哎好傻逼啊 没有想到算不能的一直在想怎么算能的 太傻逼了 其实很简单 我们只需要对好友<=k的首先dfs一下给他连接着的朋友-1 然后如果小于了就递归下去 这个正确性 ...
- Bootstrap 框架、插件
Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自 ...