el-table中设置第一列为多选框,且多选框动态禁用

这篇具有很好参考价值的文章主要介绍了el-table中设置第一列为多选框,且多选框动态禁用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

给el-table第一列写成以下代码:

  <el-table-column
      type="selection"
      width="55">
    </el-table-column>

效果:

el-table中设置第一列为多选框,且多选框动态禁用,vue.js,elementui,javascript

多选框动态禁用

el-table中设置了 type="selection",但是由于部分数据是已经处理过的,不允许选中,但是其他的数据有可以多选的时候,我们需要动态的判断每一行的数据是否可以选中, type="selection"时有这样一个属性:

el-table中设置第一列为多选框,且多选框动态禁用,vue.js,elementui,javascript

所以我们只需要动态的控制selectable的值就可以达到动态禁用的目的

 <el-table-column type="selection" width="55" :selectable="selectable">
 
 methods:
    selectable(row, index) {
      //unselectableList为需要禁用的数组,需要禁用的数组中与本页数据无相匹配的数据的数据返回true(本行不禁用),
      //反之返回false(本行禁用)
      return (
        this.unselectableList.findIndex(
          (item) => item.opinionId == row.opinionId
        ) === -1
      );
    },
    

unselectableList为需要禁用的数组,我的项目中是通过计算属性,将这个数组生成的。

最终效果:

el-table中设置第一列为多选框,且多选框动态禁用,vue.js,elementui,javascript

禁用的数组根据自己后端返回的参数来决定,比如我的是status的值为1的话就是禁用: 

 computed: {
    unselectableList() {
      return this.list.filter((item) => {
        return item.status == "1";
      });
    },
  },

 文章来源地址https://www.toymoban.com/news/detail-800471.html

到了这里,关于el-table中设置第一列为多选框,且多选框动态禁用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-table 多个表格切换多选框显示bug

    今天写了个功能,点击左侧的树做判断,一级树节点显示系统页面,二级树节点显示数据库页面,三级树节点显示表页面。 数据库页面和表页面分别有2个el-table  ,上面的没有多选框,下面的有多选框  现在出现bug,在点击树节点,代码: // 点击节点     nodeClick(data) {    

    2024年02月11日
    浏览(40)
  • el-table多选框设置默认选中,翻页保留选中状态

    最近碰到个需求,el-table列表渲染数据,要求有多选框并且附带默认选中,翻页后保留选中状态 写默认选中时百度一下还很简单,但是碰到个bug,第一次翻页可以保留,第二次翻页回来之后选中的就没了。 经过研究解决,记录一下,直接上代码了 默认选中只需要给table增加

    2024年02月14日
    浏览(53)
  • 实现el-table两列多选框且不可同时勾选

    1、效果图如下,功能:必修和选修不可同时勾选 2、代码如下

    2024年02月11日
    浏览(42)
  • el-table select 多选框如何实现选中数据回显

    现象描述: 将用户勾选的内容添加到表格,当页面还未关闭时,选项还是正常勾选,但是只要退出该页面,再进来就会发现勾选被取消了 需求描述: 已选择项默认勾选,且表格内容更改,勾选项也同步更改 效果如下:

    2024年02月14日
    浏览(46)
  • el-table 单击某一行,该行的前面的多选框显示已勾选

    目   录         官网:       1.  单页面        2. table是组件 案例: 官网:   1.  单页面 通过单击获取当前行的数据,然后传给选中显示勾选的方法。 2. table是组件 2.1  在table组件中添加方法 2.2  在主页面调用

    2024年02月11日
    浏览(48)
  • element-ui的el-table表格复选框只能单选,不可多选

    element的el-table表格复选框只能选中一条,选择下一条,上一条去掉勾选。使用文档中select方法,el-table绑定一个ref。具体代码实现如下 toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) 

    2024年02月11日
    浏览(57)
  • el-table @selection-change实现多选框的效果以及可以进行批量删除的操作

    2023.2.2今天我学习了如何在表格中添加多选框并且可以进行多选的效果,以及可以进行批量删除的操作。 效果:      html代码如下: js代码如下:

    2024年02月08日
    浏览(35)
  • Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则

    根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则 我们需要设置一个 flag 来标识已勾选的行,el-table渲染数据结构是数组对象形式,我们可以在每个对象中手动加如一个标识,例如默认:selected : false,如你的源数据中已有类似key,则可用它作于唯一标识 htm

    2024年02月02日
    浏览(63)
  • el-table多选toggleRowSelection不生效?

    做弹窗里有个表格多选时,经常遇到再次打开弹窗, 已选值赋值不上 的问题,这里简单记录一下解决方案。 element官方提供的例子经常是有各种问题的,这里经常是 toggleSelection不生效 toggleRowSelection是用来控制table表格选择框回显的方法,这个方法有两个参数 toggleRowSelection

    2024年02月11日
    浏览(36)
  • 【ElementUI】el-table中复选框禁用处理

    Vue 项目开发过程中,尤其是后台管理开发,经常会用到 ElementUI 中的表格和表单,有时候我们需要在表格中添加复选框,来实现全选和单选当前行的操作,而这时如果有条件要限制选框是否禁用该如何处理呢?这就需要展开来说了,因为表头全选和表格行中的单个选择处理是

    2024年02月07日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包