vue element el-table 禁止勾选

最新推荐文章于 2025-02-11 16:31:40 发布
原创 最新推荐文章于 2025-02-11 16:31:40 发布 · 1.7k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #javascript

文章介绍了如何在ElementUI的el-table-column中使用selectable属性进行列的勾选设置，并展示了基于特定条件（如操作类型、分配者和节点标签）动态控制勾选状态的示例代码。 
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
关注
ElementUI - ＜el-table＞ 表格 selection 设置的复选框禁止选中某些行
🏆 前端领域优质创作者
07-23 1万+
前言 当表格设置 selection 开启复选框可选时，您可能需要禁用一些 业务条件成立 的行数据。 例如，禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据，复选框无法选中，如下图所示效果： 实现方法 表格文档：https://element.eleme.cn/#/zh-CN/component/table ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。 该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行
vue中el-table配合el-tag实现多选/单选编辑、清除回显
inculgehh的博客
01-05 1114
在工作时，遇到这样一个需求，表格中内容需要可以勾选或多选，且有数量限制，并且将选中的一行中的指定数据，以标签展示。最后监听我们所绑定的这个数据就可以实现数量限制，抛出实现父组件的回显。在请求数据之前时候，需要先清除所有勾选状态便于回显。
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
热门推荐
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
封装el-table type=“selection“，禁止勾选某行数据
Robi_Candy的博客
10-23 1147
为子组件操作列添加selectable属性，属性具体作用参考文档。父组件进行值或者函数传递，并在函数中设置禁止勾选的条件。通过props接收父组件传递的值或方法。
elementUi - - - - table 勾选功能 & 禁止勾选
Dark_programmer的博客
07-07 3167
elementUi - - - - table 勾选功能 & 禁止勾选
elementui 的el-table设置不可勾选
DejaVus的博客
10-19 2726
el-table 勾选框禁用
element中table多选功能禁止选择某一项
lll19960406的博客
09-01 5241
element-ui中的table的多选很好用，但是如果其中某一项禁止选择，该怎样操作呢 在官方文档中，有一个这样的属性，可以控制是否禁止选择 <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> selectable(row,index)...
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
补充知识：vue-element-upload 文件上传打开选择文件弹框前进行提示或操作 在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认或进行提示。引申开来，即可在打开选择文件弹框之前，做一系列操作。 ...
【虚拟滚动】vue2 element el-table组件虚拟滚动效果
Li_Ning21的博客
02-11 2489
首先，虚拟滚动的场景是什么？ 项目中可能会遇到一些通用情况，它要求列表不能分页处理，也不能懒加载，必须一次性展示“所有数据”，且不能有过分的卡顿等问题。这次就以第二种情况来说明如何处理，接上一篇博客 一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）为了给多语言提供一个可供展示和修改的页面，前端自己实现了一个虚拟滚动且能修改多语言的页面。 直接上代码：
vue element 多选el-table相关
weixin_43909743的博客
04-30 750
el-table中选择框在分页的时候保持选中状态 el-table 存在多选框时；当我们进行翻页或搜索，选中状态会重置 处理： 设置键row-key,值为每一项的唯一值 设置 :reserve-selection=“true” <el-table :row-key='row => row.unicode'> <el-table-column type="selection" :reserve-selection="true"><el-table-column&gt
el-table 复选框 默认勾选和禁止勾选
MM_520131400的博客
08-24 8154
el-table 白哦个复选框 sortable toggleRowSelection
element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改 三种状态显示问题
蓝胖子的博客
08-25 1万+
element-ui table中使用type='selection' 实现禁用，勾选，默认选中不可修改 三种状态显示问题
el-table可以选中 但是在某些条件下禁止选中
只会写bug
10-22 1947
在Element UI中，可以通过覆盖默认的行为来实现这样的功能，即在某些条件下禁止选中表格中的行。具体来说，可以通过监听。字段，并根据此字段决定是否允许选中，就能实现在某些条件下禁止选中的功能。事件或者覆盖选择框的行为来实现这一点。以下是一个示例，展示了如何在一个。这样，通过在数据中增加一个。
vue的el-table多选对某个选项进行禁用
weixin_43410094的博客
12-12 1398
【代码】vue的el-table多选对某个选项进行禁用。
el-table在某些条件下禁止选中
只会写bug
10-22 888
【代码】el-table在某些条件下禁止选中。
element-ui el-table 选择框禁止选中
棠樾的博客
12-16 288
根据API 里面有个Table-column Attributes
Vue element-ui如何给table表格的一行设置为不可勾选，input不可修改
七月❤的博客
06-07 2821
【代码】Vue element-ui如何给table表格的一行设置为不可勾选，input不可修改。
vue + elementui------ 项目表格多选根据状态来禁用---项目积累
飞翔༒之翼
12-19 810
这个是直接写在里面了不用再额外调用方法了。判断后台给返回的状态码。
vue3 el-table 修改勾选框的未选中边框颜色
最新发布
07-17
在 Vue3 中使用 Element Plus（Element UI 的 Vue3 版本）时，如果需要修改 `el-table` 组件中勾选框未选中状态的边框颜色，可以通过覆盖组件的默认样式来实现。 ### 修改 el-table 勾选框未选中状态的边框颜色 1. **通过 CSS 覆盖样式** 可以使用浏览器开发者工具检查 `el-table` 内部的 checkbox 元素，并找到对应的类名或属性选择器。通常情况下，Element Plus 的 checkbox 样式是通过 `.el-checkbox__input` 类进行控制的。 在你的组件的 `<style>` 部分添加如下 CSS 代码： ```vue <style scoped> .el-table .el-checkbox__input:not(.is-checked) .el-checkbox__inner { border-color: #ff0000; /* 设置你想要的边框颜色 */ } </style> ``` 这段代码的作用是将所有 `el-table` 中未选中的 checkbox 的边框颜色更改为红色。你可以根据需要修改 `#ff0000` 为其他颜色值。 2. **使用 SCSS 变量（可选）** 如果你在项目中使用了 SCSS 并且希望全局修改 Element Plus 的样式，可以通过覆盖 SCSS 变量来实现。首先，在项目中安装并配置好 SCSS 支持，然后在项目的入口文件（如 `main.js` 或 `main.ts`）中引入 Element Plus 的主题变量。 在你的 SCSS 文件中定义如下变量： ```scss $--checkbox-border-color: #ff0000; @import "~element-plus/packages/theme-chalk/src/index"; ``` 这种方式可以全局生效，适用于整个项目中所有的 `el-checkbox` 组件。 3. **动态样式绑定（高级用法）** 如果你需要根据某些条件动态地改变 checkbox 的边框颜色，可以使用 Vue 的动态样式绑定功能： ```vue <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection"> <template #default="{ row }"> <el-checkbox v-model="row.selected" :style="{ '--el-checkbox-border-color': getCheckboxBorderColor(row) }" /> </template> </el-table-column> </el-table> </template> <script setup> import { ref } from 'vue'; const tableData = ref([ { id: 1, name: 'Item 1', selected: false }, { id: 2, name: 'Item 2', selected: false }, // 更多项... ]); function getCheckboxBorderColor(row) { return row.selected ? '#409EFF' : '#ff0000'; // 根据行数据返回不同的颜色 } </script> ``` 在这段代码中，`getCheckboxBorderColor` 函数会根据每一行的数据返回不同的边框颜色。注意这里使用了 CSS 自定义属性 `--el-checkbox-border-color` 来动态设置颜色。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值