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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue3渲染器与编译器深入浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
Element-UI中<el-cascader />回显失败问题的完美解决
我们在使用el-cascader控件往数据库保存的都是最后一级的数据,那如果再次编辑此条数据时,直接给el-cascader传入最后一级的数据,它是不会自动勾选的,下面这篇文章主要给大家介绍了关于Element-UI中<el-cascader />回显失败问题的完美解决办法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue.js实现输入框绑定的实例代码,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本篇文章主要介绍了vue渲染函数render的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于vue组件文档（.md）中如何自动导入示例（.vue）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要为大家详细介绍了Vue如何使用openlayers实现绘制圆形和多边形，文中的示例代码讲解详细，感兴趣的小伙伴快跟随小编一起动手尝试一下2022-06-06
在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,这篇文章主要给大家介绍了关于Vue刷新后页面数据丢失问题的解决过程,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue+webpack 打包文件 404 页面空白的解决方法
下面小编就为大家分享一篇vue+webpack 打包文件 404 页面空白的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论