el-tabble表格单选
时间: 2023-11-14 11:08:33 浏览: 131
el-table表格单选可以通过设置`type="radio"`来实现。具体实现方式如下:
```html
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></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>
```
```javascript
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2021-01-02',
name: '李四',
address: '上海市浦东新区'
},
{
date: '2021-01-03',
name: '王五',
address: '广州市天河区'
}
],
selectedRow: null
}
},
methods: {
handleSelectionChange(val) {
this.selectedRow = val[0]
}
}
}
```
在上面的代码中,我们通过设置`type="selection"`来显示选择框,通过设置`@selection-change`事件来监听选择变化,通过`this.selectedRow`来保存当前选中的行数据。
阅读全文