学无先后,达者为师

网站首页 编程语言 正文

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

作者:让时光到此为止。 更新时间: 2022-03-03 编程语言
  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
    }
   }
 }
  1. 使用 :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 = []
      })
    },
	}
 }

原文链接:https://blog.csdn.net/qq_35257117/article/details/97906637

栏目分类
最近更新