<el-table
ref="table"
:data="tableData"
style="width: 100%"
border
@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>
data() {
return {
tableData: [
{
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 弄‘
}
],
obj: {}, //保存当前选中内容
}
},
methods: {
handleSelectionChange(selection) {
this.obj = selection[0];
if (selection.length > 1) {
this.$refs[‘table‘].clearSelection();
this.$refs[‘table‘].toggleRowSelection(selection.pop());
}
}
},
vue element-ui el-table 选择框单选修改
原文:https://www.cnblogs.com/Blogzlj/p/15166291.html