【ElementUI】table表格多选根据条件禁选某一项

最新推荐文章于 2023-11-04 09:38:01 发布
最新推荐文章于 2023-11-04 09:38:01 发布
阅读量560 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45113879/article/details/124605299
版权

elementui 前端 javascript 
<el-table-column type="selection" width="55" :selectable="selectedDisabled"> </el-table-column>

methods中：判断

selectedDisabled(row, index) {
	if (row.XXX == XXX) {
		return false //不可勾选
	} else {
		return true; //可勾选
	}
},
红豆海棠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuejs+element UI table表格中实现禁用部分复选框的方法
12-13
有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框，可以这样写 HTML： JS： 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
element table实现多选且根据条件设置多选框的disabled状态
weixin_44738844的博客
07-11 2339
首先，实现多选，很简单，官方文档也有写，: 手动添加一个el-table-column，设type属性为selection即可；需要加:selectable="handleDisable“方法来筛选，我这里是根据提交状态来判断，状态为1就不能选择。然后要根据条件设置多选框的disabled状态。
elementUi - - - - table 勾选功能 & 禁止勾选
Dark_programmer的博客
07-07 2762
elementUi - - - - table 勾选功能 & 禁止勾选
Elementui-table 多选框实现单选功能
Chunxiliao的博客
11-25 402
elementui table
手把手教你实现el-table实现跨表格禁用选项，以及禁用选择后，对应的全选按钮也要禁用任何操作
m0_59157023的博客
04-19 2543
手把手教你实现el-table实现跨表格禁用选项，以及禁用选择后，对应的全选按钮也要禁用任何操作
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
Vue+ElementUI table实现表格分页
12-13
Vue+ElementUI table表格分页，供大家参考，具体内容如下 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页...
elementUI table表格动态合并的示例代码
10-17
主要介绍了elementUI table表格动态合并的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI中Table表格问题的解决方法
12-12
element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。 在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。 1.表格样式问题：...
[ element-ui:table ] 设置table中某些行数据禁止被选中，通过selectable 定义方法解决
最新发布
weixin_70506521的博客
11-04 4821
[ element-ui:table ] 设置table中某些行数据禁止被选中，通过selectable 定义方法解决
elementUI表格复选框只能选中一个
qq_47101042的博客
03-16 2160
table表格单选
vue3 element-plus 根据表格多选状态 禁用 按钮
m0_50841860的博客
09-24 1631
vue3 element-plus 根据表格多选状态 禁用 按钮
element-ui表格多选,每次只能选中一个并获取数据
weixin_60508127的博客
06-16 1095
摘抄csdn上面的，实际可用，所以做笔记
Element ui表格控件实现多选和单选同时存在的功能
qq_45525250的博客
10-13 2374
要求：Element ui表格控件，实现多选和单选同时存在的功能完成功能如图所示：🍉🍉🍉[鄙人遇到奇怪需求总是忍不住想要记录一下] 首先，官网有说明Table控件中，多选和单选的事件。
el-table的多选框（默认全选，条件性渲染，动态勾选等功能）
玛已的小空间
05-14 1万+
前言 最近一直在跟表格里的多选框做斗争，一开始觉得el-table本身的多选框不满足我的需求，想要自定义el-checkbox来实现，结果发现很多坑，还没解决（主要是数据绑定不同步更新的问题），感觉蛮花时间的，又回头看看el-table有没有方法能完善一下，结果成功了，虽然具体实现过程还是很。。。低级，希望可以借鉴这个寻找更好的解决方案，故此记录
el-table设置部分多选框禁选
lidianbai的博客
05-28 1665
el-table设置部分禁选
【ElementUI】table表格多选状态如何禁选
A_soulmate的博客
01-11 1万+
对elementUI中table表格的多选框进行 可勾选 和 不可勾选 的处理给 type 属性为 selection 的加一个事件:selectable='selected’ <el-table-column type="selection" width="55" :selectable="selected"> </el-table-column> methods中：判断后台给返回的状态码 selected(row, index) { if (row.WaitConfirmR
element-ui table之选择框禁止选中
热门推荐
qq_36437172的博客
08-10 2万+
需求场景：当我们对列表中一下数据选中后，调用接口处理数据中的状态，而对于已经处理了的数据，则不能再次进行处理。可能你首先想到的通过选中的数据，将其中的已处理数据过滤掉。这里我们通过已处理的数据，我们将禁止选中，那怎样才能实现呢？ 首先我们实现多选: 手动添加一个el-table-column，设type属性为selection即可； 然后设置 selectable 属性来决定该行数据是否选中。...
IVew中table的选择框设置禁选
weixin_45734302的博客
05-20 603
theme: channing-cyan highlight: arduino-light 场景 vue3.0 ivew table 需求 要求根据列表数据中某个字段判断,比如状态值,只允许批量删除数据状态为新建的.然后让状态不是新建的编程不可选的方式. 代码 [不可选] 在列表数据获取的时候,进行设置操作 ```js this.$http.get(api.workTic...
elementui 表格多选
06-06
ElementUI 表格的多选功能可以通过使用 `el-table-column` 组件的 `type` 属性为 `selection` 来实现。具体步骤如下： 1. 在 `el-table` 组件中添加 `el-table-column` 组件，并将 `type` 属性设置为 `selection`。 ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> ``` 2. 在 `el-table` 组件中添加一个按钮，用于获取用户选择的行数据。 ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <el-button @click="handleSelection">获取选中项</el-button> </template> ``` 3. 在组件的 `methods` 中定义 `handleSelection` 方法，用于获取用户选择的行数据。 ```js <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市朝阳区' }, { name: '李四', age: 22, address: '上海市浦东新区' }, { name: '王五', age: 25, address: '广州市天河区' } ], selectedRows: [] // 用于保存用户选择的行数据 } }, methods: { handleSelection(rows) { this.selectedRows = rows console.log('用户选择的行数据：', this.selectedRows) } } } </script> ``` 以上就是 ElementUI 表格多选的实现方式。当用户选择表格中的行时，`handleSelection` 方法会将用户选择的行数据保存在 `selectedRows` 变量中，并输出到控制台中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值