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%" @ ...
随机推荐
- leetcode Reverse Nodes in k-Group翻转链表K个一组
Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. k ...
- 设计模式之工厂模式(Factory模式）
在面向对象系统设计中经常遇到以下两类问题: 1)为了提高内聚(Cohesion)和松耦合(Coupling),我们经常会抽象出一些类的公共接口以形成抽象基类或者接口.这样我们可以通过声明一个指向基类的 ...
- shell编程之awk
awk是一种用于处理数据和生成报告的编程语言 awk可以在命令行中进行一些简单的操作,也可以被写成脚本来处理较大的应用问题 awk与grep.sed结合使用,将使shell编程更加容易 awk工作模式 ...
- Java POI导入word, 带图片
1.导入文件示例,word中简历表格模板 2.代码示例分两部分,一部分读取图片 /** * 导入word(基本信息,word格式) * @param staffId * @param baseInfo ...
- Qt For MacOs环境搭建
使用VMWARE关于macos镜像搭建,参考https://blog.csdn.net/u011415782/article/details/78505422 关于darwin8.5.5 来安装vmt ...
- 用JavaScript实现全选-反选
实现全选-反选 在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...
- 查看 /var/log目录下文件个数 命令tree 、cut
查看 /var/log目录下文件个数 方法1. [root@oldboy learn_shell]# tree -L 1 /var/log/ |tail -1 5 directories, 42 fi ...
- 5G革命：如何让「数据」实现最大性能？
壹 早在2000年代中期,H-Store第一次在M.I.T.被我们提出来,VoltDB是H-Store的商业化产品,它表示结构相似的数据会被连续存放到一起.在本文的后续描述中,我们将使用V-H来缩写. ...
- 20201124-web方向-命令执行-RCE
参考链接:https://www.cnblogs.com/wangtanzhi/p/12311239.html RCE: 英文全称:remote command / code execcute 分别为 ...
- Guitar Pro 7 中文界面的介绍
用过Guitar Pro这款软件的小伙伴们都知道,Guitar Pro这款吉他软件因为是国外开发商研发的,所以软件最初都是英文版本,对于国内的的吉他爱好者来说,在软件使用上还是很不方便的.随着Guit ...