Vue + Element table中selection复选框禁用某一行

最新推荐文章于 2025-06-23 10:09:26 发布

原创最新推荐文章于 2025-06-23 10:09:26 发布 · 1.8w 阅读

9 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

Element

10 篇文章

订阅专栏

本文介绍在禁用函数中使用条件判断来优化代码，通过条件语句避免多行代码重复，无需循环即可实现对表格列的选择性禁用。示例代码展示了如何在Vue项目中，利用复选框功能结合条件判断实现这一优化。

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

在禁用的函数中使用条件可以禁用多行，不需要写循环

 <el-table-column
          type="selection"
          :selectable='checkboxT'
          width="28">
        </el-table-column>

 //复选框
      checkboxT(row, rowIndex){
        if(rowIndex==0){
//      if(row.lie =='1'){
          return false;//禁用
        }else{
          return true;//不禁用
        }
      },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guohongyanghy

关注关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2 - elementUI表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消children（当子级全选中，父级自动勾选）

高级前端工程师

12-15

1万+

vue2，elementui，el-table树状表格多选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，elementUI表格里树形结构嵌套复选框全选全

vue elementUI实现el-table点击行单选，点击行多选，点击复选框单选效果

qq_35815246的博客

08-23

5850

vue elementUI实现el-table点击行单选，点击行多选，点击复选框单选效果

3 条评论您还未登录，请先登录后发表或查看评论

ElementUI - ＜el-table＞表格 selection 设置的复选框禁止选中某些行

资深程序员

07-23

1万+

前言当表格设置 selection 开启复选框可选时，您可能需要禁用一些业务条件成立的行数据。例如，禁用表格中所有地址为秦皇岛市海港区居民的行数据，复选框无法选中，如下图所示效果：实现方法表格文档：https://element.eleme.cn/#/zh-CN/component/table ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行

element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改三种状态显示问题

蓝胖子的博客

08-25

1万+

element-ui table中使用type='selection' 实现禁用，勾选，默认选中不可修改三种状态显示问题

使用 vue vxe-table 实现复选框禁用，根据行规则来禁用是否允许被勾选选中

热门推荐

weixin_40841731的博客

10-24

3万+

<el-table @selection-change="changeFun"> <el-table-column type="selection"> </el-table-column> </el-table> <script> data () { return {

element Table实现循环表格、跨表格复选框功能实现

royya_buli的博客

12-09

3932

element Table实现循环表格、跨表格复选框功能实现

Element学习使用

weixin_30764137的博客

08-15

270

目录引入: 测试使用快速布局: el-tabs标签页组件 el-table组件制作表格 el-button 按钮组件常用商品区域布局商品分类布局下拉框 ...

【Vue+Element-UI】Table表格：复选框及禁用复选框

╭じò ぴé╮。Qi

06-30

2541

客户需求： Table表格数据支持复选删除，状态为“已提交”的数据不能删除。

vue+element的表格实现批量删除功能示例代码

10-18

为了实现批量删除，首先需要引入一个选择框列<el-table-column>，并在其中添加type="selection"属性，使得表格能够显示一个用于选择行的复选框。接下来，还需添加一个按钮，绑定了点击事件处理函数，用于执行删除...

vue + elementplus 表格复选框回显禁用

10-12

在Vue.js中结合Element Plus库创建表格时，如果需要对特定行的复选框实现回显并禁用，你可以按照以下步骤操作： 1. 首先，在你的数据列表(`data`部分)中，为每一项配置一个初始状态，例如`checked`表示是否被选中，...

【vue】element-ui table多选框禁用

loyd3的博客

01-06

2394

在的多选列中添加：:selectable=“selectable” <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" > //type为selection的这一列 <el-table-column type="selectio

Element UI的table表格中实现复选框勾选

m0_65376942的博客

04-02

5698

需求：在table中实现勾选多行复选框的内容，点击提交按钮，选择的复选框与表格内容对应 <template> <div> <div> <span>已选择的运动：</span> <span style="margin-right: 20px" v-for="(item,index) in interestListArry" :key="index">{{item.groupId}}<span>：&lt

element-ui table使用type=‘selection‘复选框全禁用-全选禁用

帮帮我365

08-31

1万+

element-ui table中使用type='selection'复选框禁用-全选禁用

el-table el-column selection disable

ann49988的博客

09-25

1639

几个要点： 1.通过selectable 绑定 2.绑定的方法只能返回0/1 <el-table-column type="selection" width="55" :selectable="checkbox_se...

el-table selection 回显选中和禁用

qq_23207707的博客

01-31

3340

3、做好以上两步之后就是勾选选中项目了；就是遍历table数据比较已经选中的数据，表格中对已经选中的做。是必要的，可以记录选中的数据，翻页也支持。（必须是唯一的字段，例如：id）和。

element-ui table使用type=‘selection‘复选框全禁用-全选禁用_elementui table禁用全选

2501_90245133的博客

01-12

1024

- 复选框禁用 -->

el-table 多选框设为禁用

m0_62782752的博客

11-26

648

列中用属性 :selectable="selectable"

设置el-table的selection只能单选

qq_45838276的博客

11-01

2602

【代码】设置el-table的selection只能单选。