VUE element-ui之table表格勾选功能(只能勾选某列值相同的行)

简介: VUE element-ui之table表格勾选功能(只能勾选某列值相同的行)

产品要求:表格可多选,且只能勾选客户名称相同的行。
实现步骤:
表格内配置:

<el-table border :data="Data" @selection-change="selectionChangeHandlerOrder">
            <el-table-column
              :selectable="checkboxT"
              type="selection"
              width="55"
              align="center"
            />

两种方法配合:

// 表格勾选
    selectionChangeHandlerOrder(val) {
      if (val.length !== 0) {
        this.customer = val[0].customerName//customer为自定义全局变量
      } else {
        this.customer = ''
      }
    }
// 复选框勾选限制
    checkboxT(row, index) {
      if (this.customer !== '') {//勾选时判断相同的名称可勾选
        return row.customerName === this.customer
      } else {//未勾选时全部可选
        return true
      }
    }

看效果:
在这里插入图片描述

相关文章
|
18天前
|
JavaScript
|
19天前
|
JavaScript Shell
Vue.js功能实现博客
Vue.js功能实现博客
|
17天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
13 0
|
1月前
|
JavaScript
VUE里修改element-ui的显示层次与上下间隔
VUE里修改element-ui的显示层次与上下间隔
27 1
|
1月前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
27 1
|
1月前
|
存储 JavaScript 前端开发
使用vue实现一个添加和编辑的功能
使用vue实现一个添加和编辑的功能
22 1
|
1月前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
31 1
|
1月前
|
JavaScript API 数据库
ant design vue + jeecgboot 实现本地上传视频及播放视频功能
ant design vue + jeecgboot 实现本地上传视频及播放视频功能
76 2
|
1月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
46 2
|
1月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
81 1