element ui中循环出来的表格勾选问题
需求是这样的，一个房主屋里面有多个电表，每一个表是一个账户，一次只能给一个账户缴费，在点击go按钮进行缴费，这个时候判断是否跨表勾选，跨表格勾选则弹窗提示，反之符合需求，走缴费逻辑
上代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="杨欣">
<title></title>
<link rel="stylesheet" href="../public/css/element.css">
<script src="../public/js/vue.js"></script>
<script src="../public/js/elementui.js"></script>
<style>
html,
body {
margin: 0;
padding: 0
}
</style>
</head> <body>
<div id="app">
<div class="info" v-for="(item, index) in info" :key="index">
<div>表{{index+1}}</div>
<el-table :header-cell-style="getRowClass" ref="multipleTable"
@selection-change="handleChange($event,index)" :data="item.list"
style="width: 100%;margin-bottom: 50px">
<el-table-column type="selection" width="50">
</el-table-column>
<el-table-column prop="id" label="id" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
<el-button type="primary" @click="go">go</el-button>
</div> <script>
let app = new Vue({
el: "#app",
data: {
info: [{
list: [{
id: 1,
name: 'aa',
num: 1,
age: 15,
address: "adafadfas"
},
{
id: 2,
name: 'bb',
num: 1,
age: 15,
address: "badfadf"
},
{
id: 3,
name: 'cc',
num: 1,
age: 15,
address: "cafasdfad"
},
],
},
{
list: [{
id: 4,
name: 'dd',
num: 2,
age: 15,
address: "ddafadff"
},
{
id: 5,
name: 'ee',
num: 2,
age: 15,
address: "efadfaf"
},
{
id: 6,
name: 'ff',
num: 2,
age: 15,
address: "fdfasfew"
},
]
}
],
multiSelectData: [],
},
methods: {
handleChange(e, index) {
this.multiSelectData[index] = e;//创建一个二维数组
console.log(this.multiSelectData)
},
go() {
let multiSelectData = this.multiSelectData;
let multiSelectDataTemp = multiSelectData.filter((val, index, arr) => {
return val.length > 0
})//过滤掉为空的数组
let len = multiSelectDataTemp.length;
if (len > 1) {
this.$message({
type: 'error',
message: "you have a bug"
})
}
},
//表头样式
getRowClass({
row,
column,
rowIndex,
columnIndex
}) {
if (rowIndex == 0) {
return "background:#EFEFEF";
} else {
return "";
}
},
}, })
</script>
</body> </html>
element ui中循环出来的表格勾选问题的更多相关文章
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- element ui中表格table翻页记忆勾选状态
<el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...
随机推荐
- 【JVM第二篇--类加载机制】类加载器与双亲委派模型
写在前面的话:本文是在观看尚硅谷JVM教程后,整理的学习笔记.其观看地址如下:尚硅谷2020最新版宋红康JVM教程 一.什么是类加载器 在类加载过程中,加载阶段有一个动作是"通过一个类的全限 ...
- js-根据日期获取本年所有周日
/** * 方法 描述 Date() 返回当日的日期和时间. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Date 对象返回一周中的某一天 ( ...
- wireshark实战应用（长期更新，工作随笔）
Wireshark检索语法 过滤IP地址 ip.addr eq 192.168.1.1 ip.addr == 192.168.1.1 //过滤源IP地址 ip.src eq 192.168.1.1 i ...
- git设置个人信息
git config --global user.name "username" 设置下自己提交的用户名 git config --global user.email " ...
- js前端读取文件内容
方法1:原生 <input type="file" name="file" id="file" onchange="jsRe ...
- javascript实现文件上传之前的预览功能
1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group"> <label fo ...
- 如何在Camtasia中对录制视频添加注释
今天我给大家带来的是一款专门录制屏幕动作的软件Camtasia,拥有了使我们的屏幕录像拥有全新的剪辑速度和更换颜色背景的特性.它不仅可以完成我们屏幕录像的心愿,还可以进行对录制的视频进行后期的编辑.这 ...
- 使用Camtasia制作魔性抖肩舞视频
最近一首风魔各大视频网站的魔性舞蹈又来袭了!这首充满魔性节奏的舞蹈就是抖肩舞了,为了将我热爱的抖肩舞视频分享给大家,我必须使用Camtasia教程录制(Windows系统)软件来制作一个魔性抖肩舞视频 ...
- ppt-1 操作界面与基本操作
1.Ctrl+N快速建立新文档 2.新模板:文件--新建--可免费搜索.下载新模板 3.恢复未保存的演示文稿 文件--打开(首先看到的是近期使用的演示文稿,)--鼠标滚动至末尾,可看到"恢复 ...
- 《SpringBoot第一篇：HelloWorld启蒙》
每篇一律 云对雨,雪对风,晚照对晴空. 来鸿对去雁,宿鸟对鸣虫. --<声律启蒙·一东> 什么是Spring Boot SpringBoot 是为了简化 Spring 应用的创建.运行.调 ...