Element Plus 树形表格展开或收缩所有行

我们在使用 Element Plus 表格 Table 开发前端功能时，常常会使用树形表格的展开和收缩行功能，下面记录其使用方法：

先看 Table 官方文档里的关键属性：

关键代码：

// 模板代码
<el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
<el-table :default-expand-all="isExpandAll">

// js代码
<script setup>
import { ref } from 'vue'
const isExpandAll = ref(false)
const toggleExpandAll = () => {
  isExpandAll.value = !isExpandAll.value
}
</script>

运行以上代码，发现点击 展开/折叠 按钮，表格没有任何反应，好像 default-expand-all 完全失效了。那是因为改变该值视图没有同步刷新。

解决方案：

方法1：

// 模板代码
<el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
<el-table v-if="isShow" :default-expand-all="isExpandAll">

// js代码
<script setup>
import { ref, nextTick } from 'vue'
const isShow = ref(true)
const isExpandAll = ref(false)
const toggleExpandAll = async () => {
  isShow.value = false
  isExpandAll.value = !isExpandAll.value
  await nextTick()
  isShow.value = true
}
</script>

方法2：

// 模板代码
<el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
<el-table :key="tableKey" :default-expand-all="isExpandAll">

// js代码
<script setup>
import { ref } from 'vue'
const tableKey = ref(+new Date())
const isExpandAll = ref(false)
const toggleExpandAll = () => {
  isExpandAll.value = !isExpandAll.value
  tableKey.value = +new Date()
}
</script>

版权属于：瞭月

本文链接：https://www.lervor.com/archives/280/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。