如何处理elementUI中表格多选框禁用的问题

目录
  • 处理elementUI中表格多选框禁用
  • 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);
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

  • elementUI中Table表格问题的解决方法

    elementUI中Table表格问题的解决方法

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. 在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考. 1.表格样式问题: 混乱样式.png 正常样式.png 如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题.

  • vue+elementui实现下拉表格多选和搜索功能

    vue+elementui实现下拉表格多选和搜索功能

    本文实例为大家分享了vue+elementui实现下拉表格多选和搜索的具体代码,供大家参考,具体内容如下 在elementui的基础上对下拉框和表格进行组合 template <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px&q

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 如何处理elementUI中表格多选框禁用的问题

    目录 处理elementUI中表格多选框禁用 elementUI多选表格禁用某一行不被选择 处理elementUI中表格多选框禁用 在 el-table-column type 类型为 selection 组件中,添加 :selectable='方法名' <el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style=&qu

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • Bootstrap Table中的多选框删除功能

    先上代码,后面再进行详细解释: //删除按钮事件 $("#remove").on("click", function () { // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的,所以说一定要使用bootstrapTable显示表格,#table:为table的id var rows = $("#table").bootstrapTable('ge

  • 解决LayUI数据表格复选框不居中显示的问题

    解决LayUI数据表格复选框不居中显示的问题 最后在样式文件中增加如下代码: .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 完美解决: 以上这篇解决LayUI数据表格复选框不居中显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • PHP中CheckBox多选框上传失败的代码写法

    用惯Java和其他语言的时候,表单上传只需要checkbox的name相同的时候就可以上传了 <input type="checkbox" name="checkbox" value="1"> 选项 <input type="checkbox" name="checkbox" value="2"> 选项 <input type="checkbox&

  • javascript中DOM复选框选择用法实例

    本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选全清和反选</title> &l

  • jQuery+SpringMVC中的复选框选择与传值实例

    jQuery+SpringMVC中的复选框选择与传值实例

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked"); $("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个

  • layui 数据表格复选框实现单选功能的例子

    我就废话不多说了,大家直接看代码吧!希望能帮助到你 如下所示: //点击选中(单选) //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'

随机推荐