vue3 实现el-table 部分行不让勾选

vue3 实现el-table 部分行不让勾选

html 复制代码
 <el-table
      ref="tableRef"
      :data="tableData"
      border
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <!-- 选择列:核心配置selectable回调 -->
      <el-table-column
        type="selection"
        width="55"
        :selectable="checkCanSelect"
      />
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <!-- 状态格式化显示 -->
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '正常(可选中)' : '禁用(不可选)' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
js 复制代码
const checkCanSelect = (row, index, column) => {
  // 自定义判断条件:status=1 可选中,否则禁止
  return row.status === 1
}
相关推荐
钛态4 小时前
Vite 中的 CSS 工程化:从 CSS Modules 到 UnoCSS 的渐进式迁移
前端·vue·react·web
Csvn6 小时前
原型链、this 与闭包内存:三座深水区一次打通(含内存泄漏排查实战)
前端·javascript
葡萄城技术团队6 小时前
如何通过 JSON 数据源 / Web API 快速构建轻量级报表(Report)?
前端·json·原型模式
万维易源6 小时前
趣味项目素材|免费脑筋急转弯查询接口实战接入教程
javascript·免费api·脑筋急转弯查询·脑筋急转弯接口
浪兎兎6 小时前
【Java Web】Servlet + JSP 笔记
java·前端·servlet
Patrick_Wilson7 小时前
iOS Safari Clipboard API 权限弹窗问题
前端·ios·safari
OpenTiny社区8 小时前
Naive UI × GenUI SDK:自定义物料库搭建实战
前端·ai编程
kyriewen8 小时前
我拿 4 个真实前端任务试了 GLM-5.3 Flash:代码一遍跑通,账单 4 分钱
前端·程序员·ai编程
IT_陈寒8 小时前
Vue的响应式更新有时候真的不听话
前端·人工智能·后端