<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
@row-click="singleElection"
highlight-current-row
>
<el-table-column align="center" width="55" label="选择">
<template slot-scope="scope">
<!-- 可以手动的修改label的值,从而控制选择哪一项 -->
<el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
> </el-radio
>
</template>
</el-table-column>
<el-table-column align="center" prop="id" label="编号" width="80"> </el-table-column>
<el-table-column align="center" prop="date" label="日期" width="150"> </el-table-column>
<el-table-column align="center" prop="name" label="姓名" width="80"> </el-table-column>
<el-table-column align="center" prop="address" label="地址" width="250"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "0001",
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "0002",
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "0003",
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: "0004",
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
// 当前选择的行的id
templateSelection: "",
// 当前选择的行的数据
checkList: [],
}
},
methods: {
singleElection(row) {
this.templateSelection = row.id
this.checkList = this.tableData.filter((item) => item.id === row.id)
console.log(`该行的编号为${row.id}`)
},
},
}
</script>
element-ui table表格控件实现单选功能代码实例
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 原创地址:https://www.jianshu.com/p/30bb5878040c[https://www.j...
- 原文: element-ui Table表格结合CheckBox实现单选效果 最近做项目遇到一个需求,需要实现一个...
- (一)自定义图标在element-ui 官网中,提供了两种方法: render 和 slot 来添加自定义节点内容...
- 实现远程排序给要排序的列el-table-column上加上sortable属性,值为custom,同时el-ta...
- 1,将以下样式代码添加到index.html、或app.vue中(必须是入口文件,起全局作用!) body .el...