一、在使用element table表格時,獲取選中項處理
1.視圖
<div>
<el-button type="primary" @click="getSelected()">獲取選中結果</el-button>
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<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>
2.js
export default {
data() {
return {
tableData3: [
{
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 弄"
}
],
multipleSelection: []
};
},
methods: {
//保存選中結果
handleSelectionChange(val) {
console.info(val);
this.multipleSelection = val;
},
//獲取選中結果
getSelected() {
console.info(this.multipleSelection);
console.info(this.$refs.multipleTable.tableData);
console.info(this.$refs.multipleTable);
}
}
};
更多: