Element ui 2.8版本中的table树不能默认全展开解决方法
方案一:这个方案有问题
<el-table
ref="tableTreeRef"
:data="tableDate"
......
</el-table>
js:
watch: {
tableDate: function (nv, ov) {
this.$nextTick(() => {
this.unFoldAll()
})
}
}
/**
* 展开所有下级
*/
unFoldAll () {
let queryResult = this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr')
for (let i = 0; i < queryResult.length; i++) {
let item = queryResult[i]
item.style.display = ''
let classList = item.querySelectorAll('td > div > div')[0].classList
classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.add('el-table__expand-icon--expanded')
}
// IE 不支持 forEach
// this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr').forEach(item => {
// item.style.display = ''
// let classList = item.querySelectorAll('td > div > div')[0].classList
// classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.add('el-table__expand-icon--expanded')
// })
},
/**
* 收起所有下级
*/
foldAll () {
let queryResult = this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr')
for (let i = 0; i < queryResult.length; i++) {
let item = queryResult[i]
if (i !== 0) {
item.style.display = 'none'
}
let classList = item.querySelectorAll('td > div > div')[0].classList
classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.remove('el-table__expand-icon--expanded')
}
// IE 不支持 forEach
// this.$refs.tableTreeRef.$el.children[2].querySelectorAll('tr').forEach((item, index) => {
// if (index !== 0) {
// item.style.display = 'none'
// }
// let classList = item.querySelectorAll('td > div > div')[0].classList
// classList.contains('el-table__expand-icon') && item.querySelectorAll('td > div > div')[0].classList.remove('el-table__expand-icon--expanded')
// })
}
2、方案二:
比较完美的解决这个问题:
JS:
....
// 默认true
isShowTable: true
....
watch: {
tableDate: function () {
this.$nextTick(() => {
this.expandAll()
})
}
},
.....
/**
* 触发所有展开图标的click事件
*/
expandAll () {
// 获取点击的箭头元素
let els = document.getElementsByClassName('el-table__expand-icon')
for (let i = 0; i < els.length; i++) {
els[i].click()
}
},
/**
* 展开所有下级
*/
unFoldAll () {
this.isShowTable = false
this.$nextTick(function () {
this.isShowTable = true
let _this = this
window.setTimeout(function () {
_this.expandAll()
}, 300)
})
},
/**
* 收起所有下级
*/
foldAll () {
this.isShowTable = false
this.$nextTick(function () {
this.isShowTable = true
})
}
HTML:
<!-- 需要给table加一个v-if属性控制table销毁或初始化 -->
<el-table
v-if="isShowTable"
:data="tableDate"
ref="tableTreeRef"
style="width: 100%;margin-bottom: 20px;"
:v-loading="dataListLoading"
row-key="id"
border
:default-expand-all="isExpand"
:tree-props="{children: 'positionTree'}">
<!--岗位名称-->
<el-table-column
prop="positionNameCn"
:label="$t('res.department.jobName')">
</el-table-column>
<!--岗位代码-->
<el-table-column
prop="positionCode"
:label="$t('res.department.jobCode')" align="center">
</el-table-column>
<el-table-column
align="center"
width="200"
:label="$t('handle')">
</el-table-column>
</el-table>
Element ui 2.8版本中的table树不能默认全展开解决方法的更多相关文章
- MySQL中同时存在创建和更新时间戳字段解决方法浅析
MySQL中同时存在创建和更新时间戳字段解决方法浅析 明确我的MySQL版本.mysql> SELECT VERSION();+------------+| VERSION() |+------ ...
- universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...
- MySQL中遇到的几种报错及其解决方法
MySQL中遇到的几种报错及其解决方法 1.[Err] 1064 - You have an error in your SQL syntax; check the manual that corre ...
- Python3中使用HTMLTestRunner报No module named 'StringIO'解决方法
今天在学习使用HTMLTestRunner生成测试报告时遇到一个报错,如图所示: 网上搜索了下“No module named 'StringIO'”解决方法,原来我用的是Python 3.X版本,而 ...
- mysql You can't specify target table for update in FROM clause解决方法
mysql You can't specify target table for update in FROM clause解决方法出现这个错误的原因是不能在同一个sql语句中,先select同一个表 ...
- ORACLE动态sql在存储过程中出现表或视图不存在的解决方法
Oracle动态sql在存储过程中出现表或视图不存在的解决方法 CREATE OR REPLACE PROCEDURE P_test is strsql varchar2(2000); BEGIN ...
- 检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下:
检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第 一步:首先将msvcr71.dll, SQLD ...
- log4j中Spring控制台输出Debug级信息过多解决方法
log4j中Spring控制台输出Debug级信息过多解决方法 >>>>>>>>>>>>>>>>> ...
- [datatable]关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法
-- :09关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法 在实际编程工程中,常常遇到这样的情况:DataTable并不 ...
随机推荐
- C语言之volatile
emOsprey 鱼鹰谈单片机 2月21日 预计阅读时间: 4 分钟 和 const 不同(关于 const 可以看 const 小节),当一个变量声明为 volatile,说明这个变量会被意想不到 ...
- 【方法】JS判断当前页面环境:PC端/移动端,安卓/IOS,微信环境/QQ环境等等
[主要知识] 浏览器设备信息:navigator.userAgent(本文中主要用到知识) 浏览器版本信息:navigator.appVersion var ua = navigator.userAg ...
- pycharm mysql数据源配置、SQL方言配置
会发现有提示,看着不爽,但不影响运行程序, 这里提示没有配置数据源,现在配置MYSQL数据源 然后看到右边Database选项卡,点击 然后可能会出现网络防火墙提示,选择全部允许,之后可能会在pych ...
- hdu 5187 zhx's contest (快速幂+快速乘)
zhx's contest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) To ...
- XGBoost的优点
1. Gradient boosting(GB) Gradient boosting的思想是迭代生多个(M个)弱的模型,然后将每个弱模型的预测结果相加,后面的模型Fm+1(x)基于前面学习模型的Fm( ...
- 深入学习golang中new与make区别
Go语言中的内建函数new和make是两个用于内存分配的原语(allocation primitives).对于初学者,这两者的区别也挺容易让人迷糊的.简单的说,new只分配内存,make用于slic ...
- ReSharper “Cannot resolve symbol” even when project builds
ReSharper “Cannot resolve symbol” even when project builds This worked for me (VS2012u4, R# 7.1.3) ...
- kotlin array
(1)Kotlin语言使用Array表示数组. (2)[] 可以用于访问数组的元素, [] 被进行了操作符的重载,调用的是 Array 类的 setter 和 getter 方法 2.创建数组 (1) ...
- Spring数据分析思维课
本文目录 一.杂 二.四大行业数据分析 1.工具 1.电商数据分析——以京东为例 2.sql常见问题 2.互联网金融——以芝麻信用为例 3.数据异常排查 3.游戏行业——以欢乐斗地主为例 4.融入 ...
- linux 下项目的发布
[wangq10@VM000001865 logs]$ [wangq10@VM000001865 ~]$ ls[wangq10@VM000001865 logs]$ apache-tomcat-7.0 ...