問(wèn)題描述：在vue中使用element的樹(shù)形表格時(shí)，想要在頁(yè)面初始化時(shí)就默認(rèn)收起樹(shù)形表格下拉，但是實(shí)際開(kāi)發(fā)過(guò)程中在表格中設(shè)置
default-expand-all屬性之后表格并不起效果，也就是頁(yè)面初始化之后樹(shù)形列表仍舊都是展開(kāi)的，這就很不合理；如果數(shù)據(jù)較少的話還可以接受，但是如果數(shù)據(jù)很多，而用戶(hù)迫切的想要通過(guò)頂級(jí)列表進(jìn)行一系列操作，而給用戶(hù)初始化看到的卻是全部展開(kāi)的列表，擱誰(shuí)誰(shuí)不煩！??！
原因：
default-expand-all屬性確是是可以收起樹(shù)形表格的，但是它起作用的時(shí)機(jī)為表格初始化時(shí)。但是在實(shí)際開(kāi)發(fā)過(guò)程中表格的數(shù)據(jù)獲取是異步的，也就是說(shuō)，在數(shù)據(jù)來(lái)到表格之前，這個(gè)屬性已經(jīng)走完了它的流程，而當(dāng)數(shù)據(jù)來(lái)到之后，就不在生效；即：只有初始化的時(shí)候是生效的，動(dòng)態(tài)修改無(wú)效的。
解決辦法：
每修改一次就讓表格初始化一下文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-817647.html
控制展開(kāi)和折疊的按鈕
<el-button type="primary" @click="isFold = !isFold"
><i class="el-icon-sort" style="transform: rotate(90deg)"></i>
展開(kāi)/折疊
</el-button>
表格中的配置
isFold：控制展開(kāi)/折疊，menuTable：用來(lái)二次初始化表格文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-817647.html
<el-table
v-if="menuTable"
:data="tableData"
border
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-loading="loading"
:default-expand-all="isFold"
>
數(shù)據(jù)定義
data() {
return {
isFold: true,
menuTable: null,
}
}
方法
watch: {
isFold() {
this.menuTable = false;
this.$nextTick(() => {
this.menuTable = true;
});
},
},
到了這里，關(guān)于EL-UI樹(shù)形表格頁(yè)面首次加載-默認(rèn)收起的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
