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
}
相关推荐
钛态28 分钟前
AI 辅助:前端框架反模式:过度封装、状态滥用与副作用失控
前端·vue·react·web
Rysxt_31 分钟前
React vs Vue.js:2025年两大主流前端框架深度对比教程
vue.js·react.js·前端框架
by__csdn31 分钟前
Vue vs React vs Angular:前端框架终极对决
前端·vue.js·react.js·前端框架·vue·react·angular
钛态33 分钟前
前端框架选型决策框架:React、Vue、Svelte、Solid 的 2026 年横评
前端·vue·react·web
反正我还没长大43 分钟前
Vue3响应式原理深度解析:揭秘现代前端框架的核心引擎
vue.js·前端框架·vue·proxy模式
2501_926102861 小时前
深入浅出Vue.js前端框架设计:核心原理与实践指南
前端·vue.js·前端框架
程序员黑豆2 小时前
使用AI编程开发鸿蒙应用:从环境搭建到实战示例
前端·harmonyos
程序员黑豆5 小时前
鸿蒙应用开发:一次开发多端部署之响应式布局完全指南
前端·harmonyos
小月土星6 小时前
2.0 React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
To_OC7 小时前
LC 35 搜索插入位置:二分查找谁都会,边界条件谁写谁懵
javascript·算法·leetcode