需求是这样的，一个房主屋里面有多个电表，每一个表是一个账户，一次只能给一个账户缴费，在点击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. vite 搭建Vue3.0项目

    1.全局安装vite:npm install create-vite-app -g 2.创建项目:npx create-vite-app project-name 3.cd project-name ...

  2. pthread 多线程基础

    本文主要介绍如何通过 pthread 库进行多线程编程,并通过以下例子进行说明. 基于莱布尼兹级数计算 \(\pi\) . 多线程归并排序 参考文章: [1] https://computing.ll ...

  3. .net core中的哪些过滤器 （Authorization篇）

    前言 咱们上篇说到,过滤的简单介绍,但是未介绍如何使用,接下来几篇,我来给大家讲讲如何使用,今天第一篇是Authorization.认证过滤器, 开发环境介绍 开发工具:VS2019 开发环境:.ne ...

  4. linux之NTP服务

    1. NTP服务(网络时间协议) Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议,它可以提供高精准度的时间校正(LAN上与标准间差小于1毫秒,WAN上几十毫秒) ...

  5. Freebsd10.2安装包升级pkg引起环境破坏的解决

    前言 freebsd10.2环境在安装一个新软件包的时候提示升级pkg到1.10.1,然后点击了升级,然后整个pkg环境就无法使用了 记录 升级完了软件包以后第一个错误提示 FreeBSD: /usr ...

  6. this.getClass().getResource("") url path file 区别

    首先注意 "/word/appointDismiss.docx" 前面一定要加 /,有一次我就是忘记加/ 查了半天错, 不能写成 "word/appointDismiss ...

  7. Linux Shell 错误： $'\r': command not found错误解决

    在Linux下执行程序最省事的方式就是将系统的执行流程封装成一个shell脚本,上传到linux环境中后就可以直接执行了,但是今天在具体实施的时候出现了错误 $'\r': command not fo ...

  8. [代码审计Day1] in_array代码审计

    简介 1 简介  in_array() 函数搜索数组中是否存在指定的值. 语法:in_array(search,array,type) 参数 描述 search 必需.规定要在数组搜索的值. arra ...

  9. webug第七关:越权

    第七关:越权 观察url 将name换成admin 更改了admin的密码

  10. webug第四关:告诉你了flang是5位数

    第四关:告诉你了flang是5位数 开始看到有点懵 于是不要脸的看源码 burp跑弱口令