<!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">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.10.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-table :data="tableData" size="small" ref="Table"
:cell-style="{'font-size': '10px',}" v-on:selection-change="handleSelectionChange" border >
<el-table-column type="selection" width="37"></el-table-column>
<el-table-column prop="HID" label="HID" width="180"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
<script>
var dd = new Vue({
el: '#app',
created(){
this.tableData= [{
HID:1,
date: '2016-05-02',
name: '王小虎',
CHOOSE:false,
address: '上海市普陀区金沙江路 1518 弄',
},{
HID:1,
date: '2016-05-03',
name: '王小虎',
CHOOSE:false,
address: '上海市普陀区金沙江路 1518 弄',
},{
HID:2,
date: '2016-05-02',
name: '王小虎',
CHOOSE:false,
address: '上海市普陀区金沙江路 1518 弄',
},
];
},
data:{
tableData:[],
multipleSelection:[],
choose:false, //多选使用
},
methods: {
currentchange(val) { this.$refs.Table.toggleRowSelection(val) },
handleSelectionChange(val) {
var self = this;
if (!self.choose) {
self.choose = true;
var newArr = this.multipleSelection.filter(function (value) { //取出 当前的选择和上一次选择的不同项
return val.indexOf(value) === -1;
});
self.tableData.forEach(a => { //相同的值选中
var item = false;
val.forEach(b => {
if (b.HID == a.HID)
item = true;
});
a.CHOOSE = item;
});
newArr.forEach(a => { //如果取出不同项目就反消选择
self.tableData.forEach(b => {
if (b.HID == a.HID)
b.CHOOSE = false;
});
});
self.tableData.forEach(a => this.$refs.Table.toggleRowSelection(a, a.CHOOSE));
self.choose = false;
var list = [];
self.tableData.forEach(a => { //取选择的保存到list
if (a.CHOOSE == true)
list.push(a);
})
this.multipleSelection = list;
}
},
}
});
</script>
</script>
</body>
</html>