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

最新推荐文章于 2025-03-04 16:05:16 发布

让时光到此为止。

最新推荐文章于 2025-03-04 16:05:16 发布

阅读量1.2w

点赞数 2

分类专栏：应用场景文章标签： el-table el-table 展开行

本文链接：https://blog.youkuaiyun.com/qq_35257117/article/details/97906637

版权

应用场景专栏收录该内容

14 篇文章

订阅专栏

本文探讨了Element UI中ElTable组件的两种展开行控制方式：使用default-expand-all属性实现初始化时的统一展开或关闭，以及利用expand-row-keys属性实现灵活的手动控制。前者简便但缺乏交互性，后者虽需更多代码配置，却能提供更丰富的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式：使用 :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
    }
   }
 }

使用 :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 = []
      })
    },
	}
 }