如何处理elementUI中表格多选框禁用的问题
更新时间：2022年09月24日 16:24:17 作者：lt要努力
这篇文章主要介绍了如何处理elementUI中表格多选框禁用的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
处理elementUI中表格多选框禁用
在 el-table-column type 类型为 selection 组件中，添加 :selectable='方法名'
<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange"> <el-table-column type="selection" width="50" :selectable='selectEnable'> </el-table-column> <el-table-column prop="appName" label="选择产品" align="center" width="350"> </el-table-column> </el-table>
方法函数
selectEnable(row, rowIndex) {
if (this.enabelIds.some(item => item === row.id)) {
return false
} else {
return true// 不禁用
}
}elementUI多选表格禁用某一行不被选择
首先使用element-ui 的表格组件
具体代码如下
<el-table :data="tableData"> <el-table-column type="selection" :selectable="selectHandle" label="多选" align="center"> </el-table-column> </el-table>
其中tableData为绑定的表格数据，将表格第一列的type设置为selection，代表多选。
selectable绑定的selectHandle()方法仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选，接下来只需要在selectHandle()方法中设置返回值就可以了
如下：
//在参数row中可以获得这一行的数据,index为这一行的下标,
//我的需求是禁用第一行,所以在index === 0 的时候,返回false即可
selectHandle(row, index) {
return !(index === 0);
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue结合leaflet实现克里金插值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
在Vue组件中的IP地址输入框定义一个checkIpAddress方法,该方法使用正则表达式对传入的IP地址进行验证,这篇文章主要介绍了Vue输入框实时验证IP地址合法性并在下方进行提示,需要的朋友可以参考下2024-06-06
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下2018-01-01
vue-cli3配置favicon.ico和title的流程
这篇文章主要介绍了vue-cli3配置favicon.ico和title的流程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在vue项目中,搜索功能是我们经常需要使用的一个场景,下面这篇文章主要给大家介绍了关于Vue关键字搜索功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue3过渡动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
Vue3报错‘defineProps‘ is not defined的解决方法
最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下2023-01-01
为什么要在标题里加上一个业务数据的上报呢，因为在咱们前端项目中，可上报的数据维度太多，比如还有性能数据、页面错误数据、console捕获等。这里我们只讲解业务数据的埋点。2021-05-05
Vue Router 是 Vue.js 官方的路由管理器。这篇文章主要介绍了详解vue-router传参的两种方式,需要的朋友可以参考下2018-09-09
virtualenv是一个创建隔绝的Python环境的工具。这篇文章主要介绍了python虚拟环境 virtualenv的简单使用，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论