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%" @ ...
随机推荐
- high Performance
目的 找出系统性能瓶颈(包括硬件瓶颈和软件瓶颈): 提供性能优化的方案(升级硬件?改进系统系统结构?): 达到合理的硬件和软件配置: 使系统资源使用达到最大的平衡. CPU过渡使用会造成大量进程等待C ...
- oracle 相关 sql
- 面经手册 · 第18篇《AQS 共享锁，Semaphore、CountDownLatch，听说数据库连接池可以用到！》
作者:小傅哥 博客:https://bugstack.cn Github:https://github.com/fuzhengwei/CodeGuide/wiki 沉淀.分享.成长,让自己和他人都能有 ...
- SQL SERVER中 DBLINK的实现
不同服务器数据库之间的数据操作 --创建链接服务器 exec sp_addlinkedserver'ITSV' ,'' , 'SQLOLEDB' ,'远程服务器名或ip地址' exec sp_addl ...
- C语言设计模式（应用）
#ifndef QUEUE_H #define QUEUE_H #define QUEUE_SIZE 10 typedef struct queue { int buffer[QUEUE_SIZE]; ...
- tp5配置引入使用redis
1.首先你的php得是已经安装了redis扩展的 2.在tp里找到config.php配置文件,找到cache,改成下面的样子 'cache' => [ // 选择模式 'type' => ...
- Hadoop大数据平台搭建之前期配置（2）
环境:CentOS 7.4 (1708 DVD) 工具:VMware.MobaXterm 一. 克隆大数据集群 1. 选中已经进行了基本配置的虚拟机,进行克隆. 2. 此处改为"创建完整克 ...
- Guitar Pro7应该怎么添加音色
众所周知,音色是乐器的灵魂所在.音色的好坏,直接影响到了整首曲子的质量.Guitar Pro7中,用户不仅可以切换乐器模拟器,还能分别对其进行音色调整.对于新手而言,Guitar Pro7是一款非常合 ...
- MathType在AutoCAD中的应用方法
我们都知道CAD是一款鼎鼎有名设计与绘图软件,有不少朋友可能用过或听说过CAD,相较而言,用过MathType的人可能要少一些,虽然它也是理科生与工科生的专用工具之一. 通过MathType我们能够在 ...
- 使用Folx下载任务完成后，怎么自动完成关闭
下载工具的优点是可以通过多线程的方式,提高文件的下载速度,减少用户的下载时间.但另一方面来说,下载工具为了达到高速下载,也会占据较多的带宽资源,甚至会拖慢电脑的运行. 因此,很多用户会利用电脑的空闲时 ...