vue element el-table 禁止勾选

最新推荐文章于 2025-02-11 16:31:40 发布
最新推荐文章于 2025-02-11 16:31:40 发布
阅读量1.5k 收藏 9
点赞数 10
CC 4.0 BY-SA版权
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CvLebron/article/details/136567758
文章介绍了如何在ElementUI的el-table-column中使用selectable属性进行列的勾选设置，并展示了基于特定条件（如操作类型、分配者和节点标签）动态控制勾选状态的示例代码。

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

el-table-column 提供 selectable属性 默认true 例如：

        <el-table-column type="selection" :selectable="selected" header-align="center" align="center" width="50"></el-table-column>


    // 勾选条件
    selected (row, index) {
      if (row.newestHistory.operate !== 5 && row.newestHistory.assignee === this.$store.state.user.name && row.newestHistory.nodeTag !== 'XTY_KSJD') {
        return true // 可勾选
      } else {
        return false // 不可勾选
      }
    },

CvLebron
关注
Vue3 - Element Plus表格组件el-table分页勾选数据并导出到Excel电子表格，Table表格跨页选中某行后一键将指定键名数据导出为xls文件，分页多选导出excel表格（纯前端
资深程序员
09-13 3853
vue3，elementPlus，Table表格，el-table组件，选中特定行导出，vue3+element-plus项目中如何勾选表格数据导出到excel表格，表格数据选中与全选导出，导出的是当前页选中的数据，将分页的表格导出下载，前端导出，导出表格，excel，xls，可导出分页数据，表格跨页勾选后导出xlsx，Vue3表格中导出Excel，如何先勾选表格复选框然后导出，表格下载为xls文档，Vue3实现Excel表格导出，将表格选中的数据导出为excel，分页的表格如何导出来，表格勾选行后再导出x
elementUI多选框已选内容禁止再次勾选
C_TopTopTop的博客
03-04 921
<el-table :data="dataList" class="common-table" border empty-text="数据为空" @selection-change="handleSelectionChange"> <el-table-column label="编号" width="150" prop="id" header-align="center" align="center"></el-table-column&gt...
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
elementUi - - - - table 勾选功能 & 禁止勾选
Dark_programmer的博客
07-07 3024
elementUi - - - - table 勾选功能 & 禁止勾选
element-ui table之选择框禁止选中
热门推荐
qq_36437172的博客
08-10 2万+
需求场景：当我们对列表中一下数据选中后，调用接口处理数据中的状态，而对于已经处理了的数据，则不能再次进行处理。可能你首先想到的通过选中的数据，将其中的已处理数据过滤掉。这里我们通过已处理的数据，我们将禁止选中，那怎样才能实现呢？ 首先我们实现多选: 手动添加一个el-table-column，设type属性为selection即可； 然后设置 selectable 属性来决定该行数据是否选中。...
elementui 的el-table设置不可勾选
DejaVus的博客
10-19 2600
el-table 勾选框禁用
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
补充知识：vue-element-upload 文件上传打开选择文件弹框前进行提示或操作 在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认或进行提示。引申开来，即可在打开选择文件弹框之前，做一系列操作。 ...
vue el-table实现自定义表头
10-15
综上所述，通过Scoped Slot结合el-table和el-table-column组件，可以灵活地为Vue应用中的Element UI表格实现各种自定义表头需求。这样不仅可以提供更好的用户体验，还可以满足复杂业务逻辑的实现。需要注意的是，...
vue中el-table配合el-tag实现多选/单选编辑、清除回显
inculgehh的博客
01-05 1014
在工作时，遇到这样一个需求，表格中内容需要可以勾选或多选，且有数量限制，并且将选中的一行中的指定数据，以标签展示。最后监听我们所绑定的这个数据就可以实现数量限制，抛出实现父组件的回显。在请求数据之前时候，需要先清除所有勾选状态便于回显。
【虚拟滚动】vue2 element el-table组件虚拟滚动效果
最新发布
Li_Ning21的博客
02-11 1801
首先，虚拟滚动的场景是什么？ 项目中可能会遇到一些通用情况，它要求列表不能分页处理，也不能懒加载，必须一次性展示“所有数据”，且不能有过分的卡顿等问题。这次就以第二种情况来说明如何处理，接上一篇博客 一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）为了给多语言提供一个可供展示和修改的页面，前端自己实现了一个虚拟滚动且能修改多语言的页面。 直接上代码：
element中table多选功能禁止选择某一项
lll19960406的博客
09-01 5210
element-ui中的table的多选很好用，但是如果其中某一项禁止选择，该怎样操作呢 在官方文档中，有一个这样的属性，可以控制是否禁止选择 <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> selectable(row,index)...
封装el-table type=“selection“，禁止勾选某行数据
Robi_Candy的博客
10-23 946
为子组件操作列添加selectable属性，属性具体作用参考文档。父组件进行值或者函数传递，并在函数中设置禁止勾选的条件。通过props接收父组件传递的值或方法。
element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改 三种状态显示问题
蓝胖子的博客
08-25 1万+
element-ui table中使用type='selection' 实现禁用，勾选，默认选中不可修改 三种状态显示问题
el-table 复选框 默认勾选和禁止勾选
MM_520131400的博客
08-24 8072
el-table 白哦个复选框 sortable toggleRowSelection
el-table可以选中 但是在某些条件下禁止选中
只会写bug
10-22 1685
在Element UI中，可以通过覆盖默认的行为来实现这样的功能，即在某些条件下禁止选中表格中的行。具体来说，可以通过监听。字段，并根据此字段决定是否允许选中，就能实现在某些条件下禁止选中的功能。事件或者覆盖选择框的行为来实现这一点。以下是一个示例，展示了如何在一个。这样，通过在数据中增加一个。
vue的el-table多选对某个选项进行禁用
weixin_43410094的博客
12-12 1278
【代码】vue的el-table多选对某个选项进行禁用。
el-table在某些条件下禁止选中
只会写bug
10-22 816
【代码】el-table在某些条件下禁止选中。
element-ui el-table 选择框禁止选中
棠樾的博客
12-16 274
根据API 里面有个Table-column Attributes
Element UI table 选择框禁止选中
grootbaby
10-16 1472
Element UI table 过滤已处理数据为默认不选中 Table-column Attributes 参数 说明 类型 可选值 默认值 selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) — — Step1 手动添加一个el-table-column，设type属性为sel...
Vue3的el-table实现单勾选
02-07
### Vue3 Element Plus El-Table 单选示例 为了实现在 `Vue3` 中使用 `Element Plus` 的 `el-table` 组件完成单行选择功能，可以按照如下方式构建： #### 安装依赖库 确保已经安装了必要的包： ```bash npm install vue@next npm install element-plus ``` #### 创建基础模板结构 创建一个简单的页面布局来展示表格及其操作按钮。 ```html <template> <div style="margin: 20px;"> <!-- 表格 --> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <!-- 显示已选项信息 --> <p v-if="selectedRow">您选择了：{{ selectedRow.name }}</p> </div> </template> ``` #### 编写脚本逻辑 通过 JavaScript 来管理状态以及处理事件响应。 ```javascript <script setup> import { ref } from 'vue'; // 初始化表格数据 const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' } ]; // 存储当前被选中的行对象 let selectedRow = ref(null); function handleSelectionChange(selection) { // 当前只允许单选，则直接赋值给 selectedRow 变量 if (selection.length === 1) { selectedRow.value = selection[0]; } else { selectedRow.value = null; } } </script> ``` 上述代码展示了如何利用 `el-table-column` 设置带有复选框的选择列，并监听其变化以便追踪用户的交互行为。每当用户勾选不同的行时都会触发 `handleSelectionChange()` 方法，在这里可以根据实际需求调整业务逻辑[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值