el-table 多选是否置灰

最新推荐文章于 2024-09-13 11:45:14 发布
最新推荐文章于 2024-09-13 11:45:14 发布
阅读量1.5k 收藏 4
点赞数 3
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/su_zhen_hua/article/details/113518782
版权
本文介绍如何在Vue项目的el-table组件中处理多选列的禁用状态，通过代码展示实现多选列勾选项灰色不可选的效果。
摘要由CSDN通过智能技术生成

el-table 按条件控制多选是否置灰


需求

待审核规则不可删除，操作一列不显示删除按钮，批量删除不可勾选待审核规则。



如图：
在这里插入图片描述


代码

 #  只展示部分代码   是否可选我用 selectable 来判断
<el-table border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
  <el-table-column type=
最低0.47元/天 解锁文章
无情无疫
关注
专栏目录
el-table实现默认选中/置灰不可选
weixin_44988028的博客
08-31 4064
分为两种情景：置灰和选中 常用属性： :reserve-selection:true //翻页后仍记住表格选项 场景1：已经进行操作过的列表，不能再处理，需要置灰。 :selectable='checkMaterialStatus' checkMaterialStatus方法：根据已经处理的列表内容(假设为selectList)，遍历表格，如果有相同的id（唯一值），则置灰不可选，反正返回true。 checkMaterialStatus(row){ if(this.selectList
element-ui el-table多选置灰
lhp_36kr的博客
08-11 5942
el-table多选置灰示例： 1. el-table用法： <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-colum...
表格多选中部分置灰不可选
m0_63026408的博客
06-15 1057
在element-ui中列的属性中（Table-column Attributes）有 selectable函数可以根据当前那一条数据的某一个属性进行条件判断，仅对 type=selection 的列有效，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选。返回值为true可以勾选，返回值为false不可以勾选。
el-table里，第一列多选框按条件置灰
最新发布
Ace_Lilylv的博客
09-13 148
el-table里，第一列多选框按条件置灰
element ui 之表格的多选及选中的一项变灰，以及禁用
m0_51737569的博客
12-02 1812
复选框添加禁用:setDisabled属性。//table表格复选框添加禁用。在方法中根据自己的需求进行判断。
element table 多选与分页回显功能_el-table多选回显，2024年Linux运维面试题
2401_83974607的博客
04-13 400
vue项目使用elementUI的el-table多选分页回显功能，需要给导入后的员工批量选择添加部门，使用表格分页展示，并且选中的数据要求回显。下面六张图包括界面的样式，表格全选与取消全选、选中与取消选中对应的数据编号，以及分页回显逻辑。图六：左侧取消全选的效果（只取消当前界面六条数据的选择，选中员工中的数据是第二页的数据）图一：数据及界面（左边全部员工每页6条，右边选中的员工不分页）图五：点击左侧取消选中后的效果（切换页面回显后也没问题）图二：选中第一页的六条数据与第二页的六条数据。
【Element UI样式优化】el-table多选行的实现 ==＞ 批量删除功能 ==＞ el-table含有不可选中行
Sabrina_cc的博客
06-06 5923
ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。本文主要展示批量删除功能，以及多选行有不可选 2.添加selection-change ids用来保存select选中的行id；并使用single和mutiple记录选中情况。 二、实现批量删除功能 只有是multiple时，表示开启多选模式，才可以使用批量删除按钮 2.删除函数撰写 批量删除和行删除公用一个删除函数，通过是否有传参来区分。使用confirm二次确认。并最终调接口实现功能。 三、含有
如何将el-table多选表格变为单选形式
Naaaano的博客
01-04 4052
在使用饿了么表格的时候，发现官方默认的单选表格是点击表格行选中，只有一个变色提示，很容易被误认为只是hover，如下图： 而在较为严谨的后台项目里，我们需要给用户一个明确的选中感。于是乎，我们可以对默认的多选表格进行一些改造实现我们的目的，先放效果图： 直接上代码,HTML部分： <el-table :data="sequenceList" ref="sequenceTable" style="width: 100%" @select="selectRow" class="checkTable"&
el-table多选表格操作可删除单行，多选复选框可删除多行
qq_52136609的博客
10-23 833
el-table可删除多行，多选复选框可删除多行。
设置el-table表头全选框隐藏或禁用
weixin_63896561的博客
02-08 6635
table全选框
v-if判断el-table中按钮的显示与隐藏
weixin_44986077的博客
07-17 7571
一般情况下前端在做表格是时候会有状态的显示，下面是我的一个小demo 状态是根据后台返回值显示不同的按钮 下面是代码 <el-table-column prop="orderStatus" label="状态" width="120" > <template slot-scope="scope"> <el-button v-if="scope.row.or
element-ui 实现el-table表格多选、置灰表格中多选框的某个选项
前端打工人的博客
05-07 2069
<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-ta
element-ui 表格单选及表格多选，设置某些选项置灰禁止选择
热门推荐
前端打工人的博客
07-21 1万+
element-ui 表格单选、多选功能，设置某些选项置灰禁止选择，methods方法tableRowClassName定义class类名，row是当前行的数据，设置判断条件...
element ui 之表格的多选及选中的一项变灰
qq_47556649的博客
09-28 1455
解决方法：给表格的选择框加上一个属性selectable，并绑定方法。
element ui table复选框置灰禁止选择、回显、跨页选中
Lofan 的博客
04-19 5858
element ui table复选框置灰禁止选择、回显、跨页选中
element-table表格实现点击可编辑，失去焦点自动保存编辑的信息
普通前端一枚
05-17 1302
element-table表格实现点击可编辑，失去焦点自动保存编辑的信息。
前端ele根据0,1动态显示数据和按钮置灰
qq_43511320的博客
07-13 580
前段Vue和ele
el-table实现点击行单选并隐藏全选框
m0_73761441的博客
09-06 478
el-table实现点击行单选并隐藏全选框
el-table 多选数据回显
09-29
el-table多选数据回显的方法有多种。其中一种方法是使用v-model指令来绑定选中的数据数组。在代码中的el-table-column中设置reserve-selection属性为true，这将保留之前选中的数据。然后，在el-table中使用@...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值