已下例子是结合el-table的多选举例
<template>
<el-table ref="refsTable" :data="tableList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
tableList: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}],
ids: []
};
},
methods: {
handleSelectionChange (selection) {
this.ids = [];
if (selection.length > 1) {
//移除上一次选中行数据
selection.shift();
//修改选中图标为未选中状态
this.$refs.refsTable.clearSelection();
//将当前选中行改为选中状态
this.$refs.refsTable.toggleRowSelection(selection[0]);
}
// 选中的数据
this.ids = selection
console.log(this.ids)
}
}
};
</script>
<style lang="less" scoped>
/**找到表头那一行,然后把里面的复选框隐藏掉**/
::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
display: none;
}
</style>