element-ui el-table实现某列全选

在Vue.js的Element-UI框架中,通过在el-table中添加type为'selection'的列来实现全选功能。当全选状态被改变时,若用户手动取消选择某行,全选复选框无法正确响应。解决这个问题需要监听`@selection-change`事件并自定义全选逻辑。此外,调整样式确保checkbox能自动适应状态变化。
摘要由CSDN通过智能技术生成

在el-table中添加一列,type设置为selection,实现全选功能

<el-table-column  type="selection"></el-table-column>

之前看了官网的方式element组件文档
但是并不完善,因为如果在全选状态下,随意改变一行或多行为不选中,这时再次点击全选checkbox,会发现,他只会在已选中和未选中的行之间切换,并没有全选,因此自己组合了一个。具体可以去动手看看
通过checkbox来控制实现全选

   <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="isIndeterminate"   //model来控制当前checkbox的状态
  @change="toSlctAll(isIndeterminate)">全选</el-checkbox>
    //参数修改全选状态。isIndeterminate为true则全选,否则没有全选
            

全选函数

toSlctAll () {
      this.$refs.multipleTable.toggleAllSelection()//全选
    },

3、为了让checkbox灵活的自动调整,需要为el-table 添加
@selection-change=“handleSelectionChange”

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值