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

天天向上10242026-01-28 20:23

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
}