因为要控制 el-radio
与 el-table
单选的联动性,el-radio
的 lable
属性绑定的是 行数据 的ID
, 但不想把ID
显示出来

html
<el-table :data="tableData" highlight-current-row @current-change="tableChange">
<el-table-column>
<template slot-scope="scope" >
<el-radio v-model="radio" :label="scope.row.ID" @change="radioChange"></el-radio>
</template>
</el-table-column>
<el-table-column v-for="(value, field) in tableColumn" :key="field" :property="field" :label="value" width="auto"></el-table-column>
</el-table>
data
radio: "", // 单选按钮绑定值
selectRowData: "",
tableColumn: {
date: "日期",
name: "姓名",
address: "地址"
},
tableData: [ // 表数据
{
ID: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
ID: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
ID: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
ID: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
methods
tableChange(newCurrentRow) {
// 表格单选改变
this.selectRowData = newCurrentRow; // 保存当前选中数据
this.radio = newCurrentRow.ID; // 控制单选框选中
},
radioChange() {
// 单选按钮值改变
// 控制表格单选行选中, 与表格单选联动
// 这里忽略,点击单选按钮 会触发表格的单选
},
自己找到方法了,原来很简单, 直接加一个
就行了 /手动笑哭