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

  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 = []
      })
    },
	}
 }
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要修改 `el-table` 中 `el-table-filter` 的样式,可以使用以下步骤: 1. 在 `el-table` 中添加 `slot="header"`,以便自定义表头。 2. 在 `slot="header"` 中添加 `template`,并设置 `slot-scope` 为 `{ column }`,以便获取当前列的信息。 3. 在 `template` 中添加一个 `div` 元素,并设置 `class` 属性为 `filter-wrapper`,并为其添加样式。 4. 在 `div` 元素中添加 `el-table-filter` 组件,并设置其 `data-key` 属性为当前列的 `property` 值。 5. 设置 `el-table-filter` 组件的样式,可以通过使用 `::v-deep` 或 `>>>` 来覆盖其默认样式。 下面是一个示例代码: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" :filters="filterOptions" :filter-method="filterMethod" slot="header" v-slot="{ column }" > <div class="filter-wrapper"> <el-table-filter :data-key="column.property" style="width: 100%;" ></el-table-filter> </div> </el-table-column> </el-table> </template> <style scoped> .filter-wrapper { padding: 10px; border: 1px solid #ccc; border-radius: 4px; background-color: #f7f7f7; } ::v-deep .el-table-filter__list { max-height: 200px; overflow: auto; } ::v-deep .el-table-filter__list li label { display: block; margin: 5px 0; } ::v-deep .el-table-filter__bottom { padding: 5px; text-align: right; } </style> ``` 在上面的示例代码中,我们为 `el-table` 中的每一列都添加了 `el-table-filter` 组件,并使用 `filter-wrapper` 类来设置其样式。同时,我们使用 `::v-deep` 来覆盖了 `el-table-filter` 组件的默认样式,包括设置选项列表的最大高度、调整每个选项的样式以及设置底部按钮的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值