多选
使用官方文档提供的方式:手动添加一个el-table-column,设type属性为selection即可。
<template>
<el-table
ref="multipleTable"
:data="tableData"
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 style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
单选
在多选的基础上修改,样式不变,将handleSelectionChange方法修改为:
handleSelectionChange(val) {
this.multipleSelection = val
if (val.length > 1) {
this.$refs.multipleTableFrag.clearSelection()
this.$refs.multipleTableFrag.toggleRowSelection(val.pop())
}
console.log(val[0]['name'])
},
用数组存储所选行,每次数组长度大于1时,会pop之前的行,保证数组中最多存在一个行的数据。获取该行某个属性的数据,用val[0]['属性名']
。
注意:this.$refs.multipleTableFrag.clearSelection()
为通过table的属性ref值,找到相应的table,执行后面的clearSelection()方法。若多个表,记得ref要写的不一样。