element-ui el-table多选置灰

本文介绍如何在el-table中实现多选行的置灰效果,通过自定义selectable属性,结合数据列表进行判断,使得特定行不可选择。代码示例展示了如何使用Vue框架中的el-table组件,并提供了一个checkSelectable方法来控制行的选择状态。

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

el-table多选置灰示例:
1. el-table用法:
<el-table
  ref="multipleTable"
  :data="dataList"
  tooltip-effect="dark"
  style="width: 100%"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    :selectable="checkSelectable"
    width="55">
  </el-table-column>
  <el-table-column
    prop="title"
    label="题目">
    <template slot-scope="scope">
      <span v-html="scope.row.title"></span>
    </template>
  </el-table-column>
</el-table>

2. method中方法:

checkSelectable (row) {
  let mark = 0
  this.checkedInitQuestions.forEach((item) => {
    if (item.id === row.id) {
      mark = mark + 1
      return false
    }
  })
  return mark <= 0
}

checkedInitQuestions 为需要置灰的数据列表

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值