element-ui多选表格禁用某一行不被选择问题
更新时间：2023年10月18日 09:25:14 作者：将小宁
这篇文章主要介绍了element-ui多选表格禁用某一行不被选择问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element-ui多选表格禁用某一行不被选择
1.首先使用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);
},element-ui表格表头禁用全选功能
element-ui 貌似没有提供禁用全选的属性或者方法
所以只能我们自己动手来禁用全选了
第一种情况，直接不用显示全选按钮，那我们可以这么做
.el-table__header-wrapper .el-checkbox{//找到表头那一行，然后把里面的复选框隐藏掉
display:none
}
下面是效果图
element提供了一个全选的事件
select-all 当用户手动勾选全选 Checkbox 时触发的事件
所以我们要是想要它不能全选可以这么写
第二中利用全选方法，清除选择
<el-table ref="multipleTable" @select-all="onSelectAll">
</el-table>
<script>
methods: {
onSelectAll () {
this.$refs.multipleTable.clearSelection()//这个是清除所有选择项，当选择全部时，清除所有选择项
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给各位整理的是一篇关于vue数据响应式原理知识点总结，有兴趣的朋友们可以跟着学习下。2020-02-02
这篇文章给大家详细介绍了 Vue3 的虚拟DOM生成规则,文章通过代码示例和图片介绍的非常详细,具有一定的参考价值,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-09-09
由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的,这篇文章主要介绍了导致VUE页面不刷新的问题分析及解决方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了解决vux 中popup 组件Mask 遮罩在最上层的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue2+elementui上传照片方式(el-upload超简单)
这篇文章主要介绍了vue2+elementui上传照片方式(el-upload超简单),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue如何监听元素宽高变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
我们在 vue 项目的目录中经常看到 env 开头的文件,在文件内声明一些变量,这些变量就是一些配置变量,在不同环境下可使用的变量,本文我们将给大家介绍在vue开发中如何利用.env文件,需要的朋友可以参考下2023-10-10
本篇文章主要介绍了关于vue中watch检测到不到对象属性的变化的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
Vue3路由中path与redirect 的区别、使用场景及应用分析
在 Vue 3 的路由系统（Vue Router 4）中,path 和 redirect 是两个重要的概念,它们在路由配置中扮演着不同的角色,本教程将详细介绍它们的区别、使用场景以及实际应用示例,感兴趣的朋友一起看看吧2025-11-11
Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧2023-08-08
最新评论