element ui表格 禁止选择

news/2024/7/24 9:28:11 标签: elementui, 前端, javascript

有些时候我们就需要实现在一些状态下不能选择表格某些行数据的逻辑
在这里插入图片描述

主要要靠selectable

 <el-table
        :data="tableData"
        style="width: 100%;margin-top:15px"
        ref="rightTable"
        @row-click='rowClick'
        :row-class-name="tableRowClassName"
      >
        <el-table-column
            type="selection"
            :selectable="selected"
            width="55">
        </el-table-column>
        <el-table-column
            prop="knowledgeName"
            label="名称"
            width="180">
        </el-table-column>
    </el-table>

我们给type为selection 也就是我们表格的选择框 绑定了一个selectable
对应 在逻辑部分编写这个selected函数

javascript">selected(row, index) {
  if (row.status == 1) {
    return true //可选择
  } else {
    return false; //不可选择
  }
},

这里我们接受连个参数 第一个是当前这一条数据的对象 第二条是下标
然后方法返回true 则代表这条数据可选 为false则不可选
这里我们判断了每一条的status 如果等于1就可选
那么你学废了吗?


http://www.niftyadmin.cn/n/1037437.html

相关文章

element ui树形表格数据懒加载

element ui所谓的表格懒加载就是一次只展示一层的数据 <el-table:data"tableData"style"width: 100%;margin-top: 10px;"row-key"id"borderlazy:load"getChildrens":tree-props"{children: children, hasChildren: hasChildr…

SVG 图标格式文件去除文件默认颜色

SVG文件如果带有默认样式可能会导致css无法覆盖他本来的颜色 用编辑器打开SVG文件 在页面中查找 fill 属性 这个就是更改颜色的属性 把这样的代码通通干掉就好了

element ui树形懒加载

所为的属性懒加载其实就是一次只展示一层 当用户点击时再去根据他点击的这个数据去请求他的子集 <el-tree:load"loadNode":props"props"node-key"id"ref"tree"lazy><spanclass"custom-tree-node"style"displ…

vue强制让某个元素重新渲染

这个逻辑其实v-if就能实现 v-if可决定元素是否存在 <div v-if "min true">{{你好}}</div>我们现在看到min控制着这个元素是否存在于页面上 很多人可能会想 那从新渲染不就 this.min false; this.min true;但这样确实是没效果的 我们需要加一段代码…

TS定义函数接口

接口这两个字大家肯定不会太陌生 就算你没有接触过后台开发 也一定和后台对结果接口 TS的接口和java的接口有所不同 但也真的是非常同步的一个思想方向了 interface transmitName{(name:string):String }这里我们顶一个了一个接口 叫 setName 限定 要传入一个参数且必须是Stri…

Typescript泛型

interface condTrig{<T>(name:T):T }这里我们先定义一个泛型接口 var getData:condTrig function<T>(name:T){console.log(name);return name; }然后定义一个泛型函数来实现这个接口 最后 我们用两种方式来实现这个泛型函数 let userName getData<String&g…

uni-app轮播图实现之swiper

首先在data中定义一个图片数据的对象数组 data() {return {rotation: [{id: 1,url: https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg},{id: 2,url: https://img12.360buyimg.com/pop/s1180x…

uni-app引入iconfont图标

我们需要在iconfont官网中下载自己需要的图标 然后解压出来 这个我们需要这几个文件 在uni项目中根目录下的static下创建文件夹名字叫iconfont 将这里这个iconfont.css改名为 index.css 放在刚创建的iconfont文件夹下 然后在iconfont文件夹下创建font文件夹 里面放其他三个文…