<!
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
>
</
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
>