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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。