element ui中循环出来的表格勾选问题

时间 2019-11-19
标签 element 循环出来表格问题繁體版
原文原文链接
需求是这样的，一个房主屋里面有多个电表，每个表是一个帐户，一次只能给一个帐户缴费，在点击go按钮进行缴费，这个时候判断是否跨表勾选，跨表格勾选则弹窗提示，反之符合需求，走缴费逻辑css
上代码html
<!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>