element-ui el-table多选置灰

最新推荐文章于 2025-06-20 14:17:30 发布

原创最新推荐文章于 2025-06-20 14:17:30 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在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 为需要置灰的数据列表