需求是这样的，一个房主屋里面有多个电表，每一个表是一个账户，一次只能给一个账户缴费，在点击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. 模块化-CommonJs、AMD、CMD、ES6

    在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复 ...

  2. martini-md参数（mdp文件）

    输入参数:一个典型的mdp文件 1 ; 2 ; STANDARD MD INPUT OPTIONS FOR MARTINI 2.x 3 ; Updated 02 feb 2013 by DdJ 4 ; ...

  3. PF_PACKET抓包mmap

    PACKET套接口创建 内核函数packet_create处理PF_PACKET套接口的创建工作.其参数sock->type决定了采用哪一种工作模式,如果参数type为SOCK_PACKET即第 ...

  4. CSS opacity设置不透明度

    1.opacity设置不透明度 opacity会将含有这个属性的子类都变成具有opacity属性,可以改变元素.元素内容.字标签的不透明度.而rgba只会改变设置的那个背景颜色的透明度效果 <! ...

  5. 好学易懂 从零开始的插头DP（一）

    好学易懂 从零开始的插头DP(一) 写在前面 这是一篇,以蒟蒻视角展开的梳理总结.更改了一些顺序,变化了一些细节.方便蒟蒻学习理解(起码本蒟蒻是这样).大佬们可以直接看其它大佬的博客,可以学的更快. ...

  6. php openssl 加密解密

    $config = array( "digest_alg" => "sha512", "private_key_bits" => ...

  7. tp5 删除图片以及文件

    控制器调用 /** * [delimg 删除单张图片] * @return [type] [description] */ public function delimg(){ if (request( ...

  8. mysql 重要日志文件总结

    作者:丁仪 来源:https://chengxuzhixin.com/blog/post/mysql_zhong_yao_ri_zhi_wen_jian_zong_jie.html 日志是所有应用的重 ...

  9. CorelDRAW X7 X8 2017 2018是什么关系？

    从CorelDRAW 2017版本开始我们叫习惯了的X几系列的CorelDRAW毅然决然的就换了称呼,所以有时候很多朋友对于软件版本,经常会傻傻分不清,还有人认为X8版本比2017版本高,究竟为什么会 ...

  10. Vegas的软对比具体如何设置

    软对比是Vegas中比较常用的一个视频特效,通过这一特效可以让视频画面更加柔和.而对于新手用户来说,软对比显得有些陌生,不知道该如何使用. 本集主要为大家介绍:sony vegas的软对比. 在视频制 ...