<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!-- 处理table的复选框选中和取消选中，包含多个表格的情况
1.首先要确认时选中还是取消选中，这个可以通过判断当前行是否在选中的数组中来判断
-->
<!-- 处理table至少选择一个，当table剩下最后一个的时候，不允许取消 -->
<div id="app">
<el-table ref="multipleTable1" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" @row-click="(a,b,c)=>{rowClick(a,b,c,1)}">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button>切换第二、第三行的选中状态</el-button>
<el-button>取消选择</el-button>
</div>
<el-table ref="multipleTable2" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" @row-click="(a,b,c)=>{rowClick(a,b,c,2)}">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<el-table ref="multipleTable3" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" @row-click="(a,b,c)=>{rowClick(a,b,c,3)}">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<el-table ref="multipleTable4" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" @select="handleSelect" @row-click="(a,b,c)=>{rowClick(a,b,c,4)}">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
selectionAll:[],
lastTableName: '',
selection: [],
visible: false,
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
}
},
methods: {
rowClick(row, column, event,index) {
// this.$refs[this.lastTableName].toggleRowSelection(row, true)
console.log('4. ', row, column, event,index,123)
this.$refs['multipleTable'+index].toggleRowSelection(row)
},
// 状态发生变化时触发
handleSelectionChange(val) {
console.log(this.$refs, 'multipleTable');
console.log('1.', val);
this.selectionAll = []
for (let key in this.$refs) {
if (this.$refs[key].selection.length > 0) {
// console.log('5 ',key)
this.lastTableName = key
this.$refs[key].selection.forEach(item => {
this.selectionAll.push(item.name)
console.log('222. ', this.selectionAll)
})
}
}
},
},
})
</script>
</html>