方案一：这个方案有问题
<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>