一、页面效果
单选切换选中的表单项,“确定”和“取消”按钮根据需要添加,绑定目标事件即可
二、页面组件及结构
<el-form>
<el-form-item>
<el-table
border
:data="timeOptions"
style="width: 100%"
refs="selectTimeTable"
@row-click="showRow"
@current-change="handleCurrentChange"
>
<el-table-column width="50">
<template slot-scope="scope">
<el-radio v-model="selectRadio" :label="scope.$index"> </el-radio>
</template>
</el-table-column>
<el-table-column
prop="time"
label="时间"
>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
......
注意:el-radio标签中label绑定的是索引(index),再el-radio标签中间加上 则不会出现索引值了
三、数据:
data: {
timeOptions: [{
id: 1,
time: "2021-08-20_23:40:24"
}, {
id: 2,
time: "2021-08-20_23:25:24"
}, {
id: 3,
time: "2021-08-20_23:10:24"
}],
selectRadio: 0 // 默认选中第一行数据
}
四、方法:
methods: {
showRow (row) {
this.selectRadio= this.timeOptions.indexOf(row)
},
getCurrentRow (val) {
// console.log(val) // val为当前选中的行号
},
handleCurrentChange (currentRow) { // 选中行事件
// currentRow 为当前选中行的数据,可用于其他数据的赋值修改等
this.getCurrentRow(this.timeOptions.indexOf(currentRow))
},
}