首页 > 其他分享 >element Table 多选禁用

element Table 多选禁用

时间:2024-04-12 16:22:23浏览次数:22  
标签:false 多选 普陀区 禁用 element disabled Table 选框 属性

在Element UI的Table组件中,如果你想要某些行的多选框不可用,可以使用selectable属性。这个属性接受一个方法,该方法会对每一行的数据进行判断,返回false则该行的多选框会被禁用。

以下是一个简单的示例代码:

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectableStatus"
    >
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        disabled: true
      }],
    };
  },
  methods: {
    handleSelectionChange(val) {
      console.log('选中的行:', val);
    },
    selectableStatus(row, rowIndex) {
      // 如果行数据中有disabled属性,则返回false禁用多选
      return !row.disabled;
    }
  }
};
</script>

在这个例子中,我们定义了一个tableData数组,其中包含了一些带有disabled属性的数据对象。selectableStatus方法会检查每行数据是否有disabled属性,如果有,则返回false,这样该行的多选框就会被禁用。

标签:false,多选,普陀区,禁用,element,disabled,Table,选框,属性
From: https://www.cnblogs.com/tanweiwei/p/18131560

相关文章

  • IDEA突然提示git is not installed Cannot identify version of git executable:no re
    闲话:早上来打开IDEA编辑器,突然发现Git消失了,下意识点了一下安装git,等了一会发现安装失败!好嘛,大早上的事来了。随后调整了一个上午,最后实在忍不住起来上厕所,烦躁的不行把笔记本关机重启,回来发现居然自己恢复了。现在我把我查询的过程都记录下来,希望能有帮助到......
  • 基于 Scriptable 从零开始美化iOS桌面(集合篇)
    Scriptable脚本合集iOS桌面组件神器(Scriptable)原创脚本,精美作品收集、分享!如果喜欢,欢迎点个⭐️Star⭐️给予小支持,感谢您的使用!喜欢这个项目?有好的脚本?请考虑留言来帮助完善它!如果您使用过程中发现有问题或可以改进的流程,请提出Issue或Pullrequest!......
  • 电脑开机时报错No Bootable Device找不到索引的解决方法
      本文介绍笔记本电脑出现NoBootableDevice错误提示,且无法开机的多种解决办法。1问题产生  最近,笔记本电脑正在正常使用时,突然蓝屏,出现你的设备遇到问题,需要重启。的提示;最下方的终止代码具体是CRITICAL_PROCESS_DIED还是SYSTEM_SERVICE_EXCEPTION有点记不太清楚了,不过这......
  • vue+element ui el-form 阻止表单输入框按回车刷新页面
    表单只有一个元素的时候,回车会触发页面刷新,加上下面这个属性可以解决这个问题@submit.native.prevent给某个el-input添加回车键监听@keyup.enter.native="onSearch"<el-form:model="filters"@submit.native.prevent><el-form-item>......
  • Element中el-time-picer组件中value-format和format得区别
    value-format:它用于指定时间选择器的值的格式,即选择的时间的字符串格式。当用户选择时间后,组件会根据value-format的值将选择的时间转换成相应的字符串格式作为组件的值。这个属性一般用于和后端交互,将时间值以特定格式发送给服务器。format:它用于指定时间选择器的显示格式,即用......
  • tidb 6.1.4 table cache 导致的集群QPS异常问题
    1.问题现象TIDB日志中频繁的刷以下日志:[2024/03/1309:09:40.542+08:00][WARN][cache.go:205]["lockcachedtableforread"][error="previousstatement:updatemysql.table_cache_metasetlock_type='READ',lease=448342830925742080where......
  • Element Capture API
    ElementCaptureAPIDOM(元素)节点捕获捕获并记录一个特定的HTML元素(能剪裁并去除那些遮盖和被遮盖的内容)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-w......
  • 富文本内容在el-table中回显并且带省略号
    html部分<el-table><el-table-columnlabel="茶园介绍"width="100"><templateslot-scope="{row}"><divclass="show-ellipsis"v-html="row.profile"@click="viewCyPr......
  • iptables和firewalld的区别
    iptables与firewalld的区别1),firewalld可以动态修改单条规则,动态管理规则集,允许更新规则而不破坏现有会话和连接。而iptables,在修改了规则后必须得全部刷新才可以生效;2),firewalld使用区域和服务而不是链式规则;3),firewalld默认是拒绝的,需要设置以后才能放行。而iptables默认是允许的,需......
  • el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-cha
        写这篇博客的原因是前段时间做了一个数据列可变的表格,同时需要实现在网页中更新了数据列之后,能够对表格进行排序的需求。如果想要直接了解实现el-table的动态数据动态排序(列数据是通过计算获得,并且可以在页面中修改,在此基础上实现数据变化后实时更新)。请直接跳到......