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