需求是这样的，一个房主屋里面有多个电表，每一个表是一个账户，一次只能给一个账户缴费，在点击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中循环出来的表格勾选问题的更多相关文章

  1. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  2. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  3. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  6. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  7. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. element ui中表格table翻页记忆勾选状态

    <el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...

随机推荐

  1. 借助boost bind/function来实现基于对象编程。

    boost bind/function库的使用: 替换了stl中mem_fun,bind1st,bin2nd等函数.用户注册回调函数需要利用boost/bind转化成库中boost/function格 ...

  2. SQL Server 2008-LinkServer操作ORACLE

    链接来源:https://www.cnblogs.com/wangyong/p/Oracle.html 最近项目有需求需要通过SQL Server2008中的数据自动更新到ORACLE中,其实,一开始 ...

  3. 基于RBAC实现权限管理

    基于RBAC实现权限管理 技术栈:SpringBoot.SpringMVC RBAC RBAC数据库表 主体 编号 账号 密码 001 admin 123456 资源 编号 资源名称 访问路径 001 ...

  4. 解决Ubuntu配置nginx出现的问题

    Ubuntu18.04配置nginx出现的各种错误 缺少pcre库 编译nginx 出现错误 安装pcre库,出现错误 手动编译安装pcre库 (1)下载并解压pcre库 wget https://f ...

  5. 怎么在word里编辑插入数学公式？

    大学时代我们都有一个共同的噩梦--高数.每次上完高数课都有一些数学公式.可是我们最难的就是想用电脑在word中做笔记的时候该怎样用word插入公式.Word中自有的公式太少,新公式又太难输入.这也是一 ...

  6. Mac book系统的垃圾清理如何进行？

    当我们看到电脑发出的内存不足的提示,这就意味着: 1.Mac系统的内存即将被占满 2.电脑将运行缓慢 3.开机速度变慢 很多人使用Mac book一年以后都会发现,它的运行开始逐渐变慢,爱电脑的人在将 ...

  7. 庐山真面目之四微服务架构Consul和Ocelot简单版本实现

    庐山真面目之四微服务架构Consul和Ocelot简单版本实现 一.简介      在上一篇文章<庐山真面目之三微服务架构Consul简单版本实现>中,我们已经探讨了如何搭建基于Consu ...

  8. 2019-2020 ICPC Asia Hong Kong Regional Contest J. Junior Mathematician 题解（数位dp）

    题目链接 题目大意 要你在[l,r]中找到有多少个数满足\(x\equiv f(x)(mod\; m)\) \(f(x)=\sum_{i=1}^{k-1} \sum_{j=i+1}^{k}d(x,i) ...

  9. java类private/this的使用

    package 类的练习; public class Person { private String name; private int age; private String sex; privat ...

  10. day99:MoFang:Flask-JSONRPC提供RPC接口&在APP进行窗口页面操作(窗口-帧-帧组)

    目录 1.服务端基于Flask-JSONRPC提供RPC接口 1.Flask-JSONRPC简介 2.安装Flask-JSONRPC模块 3.快速实现一个测试的RPC接口 4.移动端访问测试接口 2. ...