需求是这样的，一个房主屋里面有多个电表，每一个表是一个账户，一次只能给一个账户缴费，在点击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. 机器学习-logistic对数回归求参数，画散点图以及分割线

    这个在我初学的时候我也不是很明白,于是在查了很多资料后找到一个很不错的博客给大家分享一下!! 研读一下代码对初学者有很大的帮助 作为一个初学者,一开始都是模仿别人的代码学会后就成为自己的东西了,相信你 ...

  2. C++如何实现多态

    1.   什么是多态多态是C++中的一个重要的基础,面向对象编程语言中,接口的多种不同的实现方式即为多态.2.   多态带来的好处多态带来两个明显的好处:一是不用记大量的函数名了,二是它会依据调用时的 ...

  3. 通过Tomcat Manager拿shell

    一.通过弱口令登录Tomcat后台 二.制作木马.war 1安装JDK 2.写一个jsp小马(我的小马是6.jsp) 3.cmd进小马的目录,然后运行 jar cvf shell.war  6.jsp ...

  4. 应届生应聘阿里，腾讯，美团90%会被问到的Netty面试题！史上最全系列！

    1.BIO.NIO 和 AIO 的区别? BIO:一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理.线程开销大.伪异步 IO:将请求连接放入线程池,一对多,但线程还是很宝贵的资源 ...

  5. 如何用ABBYY解决文档图像存在缺陷，OCR 准确性低的问题

    扭曲的文本行.歪斜.噪声及扫描图像和数码照片中常见的其他缺陷可能会降低识别质量.ABBYY FineReader,提供各种 自动和手动工具去除这些缺陷. 如何手动编辑图像 如果您禁用了自动预处理功能或 ...

  6. Edison：FL Studio中的常用音频录制与剪辑插件

    Edison是FL Studio中的一个完全集成的音频编辑和录制工具.Edison加载到效果插槽(在任何调音台音轨中),然后录制或播放该位置的音频.您可以在任意数量的混音器轨道或效果插槽中根据需要加载 ...

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

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

  8. Mac虚拟环境安装django

    安装:pip3 install virtualenv 创建:Virtualenv env01 激活:Source env01/bin/activate django安装:pip3 install dj ...

  9. 合并2个数组为1个无重复元素的有序数组--Go对比Python

    Go实现: 1 package main 2 3 import ( 4 "fmt" 5 "sort" 6 ) 7 8 func main() { 9 var a ...

  10. 2. git命令行操作之本地库操作

    2.1 本地库初始化 git init 命令 用于创建一个空的Git本地仓库或重新初始化一个现有本地仓库 注:.git目录中存放的是本地库相关的子目录和文件,不要删除也不要随意修改 git confi ...