el-table 展开行默认关闭或打开

ElTable展开行控制技巧

最新推荐文章于 2025-10-15 11:26:33 发布

转载最新推荐文章于 2025-10-15 11:26:33 发布 · 6.9k 阅读

前端日常专栏收录该内容

65 篇文章

订阅专栏

本文介绍了在Element UI中使用ElTable组件时，通过两种不同方式实现表格展开行的控制方法。第一种方式使用default-expand-all属性，适用于初始化时统一展开或关闭所有行，但无法手动操作。第二种方式使用expand-row-keys属性，可以灵活地控制每一行的展开状态，但实现起来相对复杂。

转载博客地址：https://blog.youkuaiyun.com/qq_35257117/article/details/97906637?utm_source=distribute.pc_relevant.none-task

1.第一种方式：使用 :default-expand-all=“isExpand”
优点：方便，简单，页面初始化的时候给 delfault-expand-all 赋值展开或关闭
缺点：不能手动操作

      <el-table
       :data="titleShineData.dataList"
       class="table-reset"
       size="small"
       :default-expand-all="isExpand"
     >

export default {
  name: 'titleShineManage',
  data () {
    return {
    	isExpand: true
    }
   }
 }

2.使用 :expand-row-keys=“expands”
优点：可以任意打开 el-table 展开行
缺点：麻烦

      <el-table
       :data="titleShineData.dataList"
       class="table-reset"
       size="small"
       :expand-row-keys="expands" 
     >
     <!-- 在展开行上 添加 type="expand" -->
       <el-table-column prop="name" label type="expand">
       </el-table-column>
     </el-table>

export default {
  name: 'titleShineManage',
  data () {
    return {
    	expands: []
    }
   },
   methods:{
		/ 查询
    onSearch () {
      getFileTitleMapInfoList(this.queryForm).then(res => {
        this.titleShineData = res.data
        // 关闭所有的展开行，给expands 设置成空值
        this.expands = []
      })
    },
	}
 }