el-table表格被选择过就禁用,不可在选择的方法

最新推荐文章于 2023-12-02 18:15:00 发布
最新推荐文章于 2023-12-02 18:15:00 发布
阅读量757 收藏 1
点赞数 2
分类专栏： Element-Ui组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/119820188
版权
该博客介绍如何在Vue中实现el-table组件的功能，当表格项被选中后，若再次尝试选择相同的ID，则该选项将被禁用，以确保不可重复选择。
摘要由CSDN通过智能技术生成

在这里插入图片描述

选择过得数据跟当前id一样的就禁用,不允许在选择

  <el-table-column
          v-if="tableData.length > 0"
          type="selection"
          :selectable="(row) 
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
王佳斌
07-10 3005
vue3，nuxt3，element plus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格 行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3 element
vue 表格有选择框 选择之后 其余的选择框对于已经选择的实现禁用
xxf995546883的博客
06-21 1489
表格 选择框 禁用
el-table 判断已选择的禁止二次选择
qq_44170622的博客
11-10 315
【代码】el-table 判断已选择的禁止二次选择。
Element - UI : el - table 多选框禁用
qq_45061461的博客
06-08 5062
点击确定,提交数据到父页面,然后保留此页面的勾选数据,下次进入的时候上次已经选中过的数据变成禁用状态,外边删除的时候,在此进入已经被删除的数据,在弹窗中变成可选取状态.2.:selectable="checkSelectSet" //selectable属性:是否不禁用状态 --- checkSelectSet自定义的方法名。开发表单弹窗的时候 需要在父组件中显示 弹窗选中的数据,然后第二次点击弹窗的时候需要禁用已经选中的数据。1.必须属性 type="selection" 这样才能变成多选。
el-table点击当前行选中，只允许选择一个，上一个选中的自动取消
Ling_jing20的博客
10-23 4658
需求场景： 点击表格行，或者表格最左侧的复选框列，选中当前表格，而且只允许选择一行，选中一行，上一行自动取消选中 效果如下： 部分代码只留了表格部分相关代码 <template> <div class=" mytable-container"> <div class="table-container"> <el-table :data="circleAdminList" style="width: 100%" bo
el-table中关于el-select下拉选项的禁用
weixin_41897680的博客
04-27 4282
el-table中关于el-select下拉选项的禁用
【Vue】element-ui el-table 选择框禁止选中
baidu_hxl的博客
09-06 3378
使用场景，新建或添加的时候可以选中或取消，查看详情的时候不可选中或取消。 设置el-table-columntype="selection" 为选择框； 设置 selectable 属性来决定该行数据是否选中； <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable="checkSelectable"/> 设置是否可以选中的条件： check.
【ElementUI】el-table中复选框禁用处理
前端知识分享喵
09-20 5694
el-table中复选框禁用处理
el-table如何禁用
weixin_46252229的博客
06-25 833
0000
vue+Element中table表格实现可编辑（select下拉框）
10-15
本文详细介绍了如何在Vue+Element的table表格中实现可编辑功能，特别是在单元格内通过select下拉框形式选择数据，并根据行信息动态更新下拉选项。以下是根据提供的文件信息，整理出的关键知识点。 ### Vue+Element...
element 多选 selection 根据条件禁止选择
weixin_30527323的博客
06-03 3738
<el-table class="lin_height" :data="tableData" @selection-change="handleSelectionChange" @sort-change='sortChange' :default-sort="{prop: 'applyDate', order: 'asc'}" > <template v-for="(it...
elementui的table组件禁用复选框
brilliantSt的博客
12-29 2002
elementui的table组件禁用复选框
Element表格多选判断某些行不可选
蓝胖子的博客
07-12 672
Element表格多选判断某些行不可选
使用el-table的树状结构数据的勾选列，可以勾选第一层级，但是第二级之后的都不支持勾选
qq_42192641的博客
10-10 1445
首先我们处理题目需求：（1）勾选所有子节点后自动勾选父节点（2）勾选父节点会自动勾选所有子节点。
手把手教你实现el-table实现跨表格禁用选项，以及禁用选择后，对应的全选按钮也要禁用任何操作
m0_59157023的博客
04-19 2564
手把手教你实现el-table实现跨表格禁用选项，以及禁用选择后，对应的全选按钮也要禁用任何操作
el-table多选选中下一个取消上一个
最新发布
m0_73393602的博客
12-02 529
【代码】el-table多选选中下一个取消上一个。
element-ui table选择框禁止选中
吴冬雪的博客
04-11 2574
需求场景：当我们对列表中一下数据选中后，调用接口处理数据中的状态，而对于已经处理了的数据，则不能再次进行处理。可能你首先想到的通过选中的数据，将其中的已处理数据过滤掉。这里我们通过已处理的数据，我们将禁止选中，那怎样才能实现呢？首先我们实现多选: 手动添加一个el-table-column，设type属性为selection即可；然后设置 selectable 属性来决定该行数据是否选中。若返回为 true， 则可以选中，否则禁止选中。
el-table多选框禁用
weixin_44845483的博客
01-06 8281
el-table多选框有时需要禁用，selectable为true此行数据不禁用，为false则本行禁用
el-table表格内容过长
09-07
对于el-table表格内容过长的情况，可以考虑以下几种解决方案： 1. 使用ellipsis属性：在el-table-column中设置ellipsis属性，可以将过长的内容以省略号的形式显示。例如： ```html <el-table-column prop="content" label="内容" show-overflow-tooltip :ellipsis="true"></el-table-column> ``` 2. 自定义单元格内容：可以通过自定义单元格内容的方式，将过长的内容进行截断或换行显示。例如： ```html <el-table-column prop="content" label="内容"> <template slot-scope="scope"> <div class="table-cell" title="scope.row.content">{{ scope.row.content }}</div> </template> </el-table-column> ``` 在上述示例中，通过设置title属性和样式来控制内容的显示。 3. 使用Tooltip组件：如果内容过长，可以考虑使用Tooltip组件来展示完整的内容。例如： ```html <el-table-column prop="content" label="内容"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" :content="scope.row.content" placement="top"> <div class="table-cell">{{ scope.row.content }}</div> </el-tooltip> </template> </el-table-column> ``` 在上述示例中，当鼠标悬停在内容上时，会显示完整的内容。 这些是常见的处理方法，你可以根据具体需求选择适合的方法来解决el-table表格内容过长的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值