elementUI表格实现单选功能

yygfw

已于 2022-08-31 19:55:04 修改

阅读量1k

点赞数

文章标签： elementui javascript 前端

于 2022-08-31 19:50:53 首次发布

原文链接：https://www.jianshu.com/p/0173a45e221a?u_atoken=88378134-2709-414f-a8fa-12b00bf2f8af&u_asession=01kKuWZov20vW_Xlm5GJDbjVmCsD6pPOhaFlHHfU4Lhh_qSOadSxNi8PlfQuPcE4uOX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K8nWvkt7-2Q5km6VFu3JzIah4gB_rorF7cG9vr14abfLGBkFo3NE

版权

<el-table-column type="index" label="单选" align="center" width="80">
  <template slot-scope="scope">
    <el-radio v-model="currentRowId" :label="scope.row.id" @change="changeRedio($event,scope.row)">&nbsp;</el-radio>
    </template>
</el-table-column>

···

// data 中
currentRowId: null

···

// 切换单选框  methods 中
 changeRedio(event,row){
    console.log('event,row:',event,row);
    this.currentRowId = event;
 },
   
···
// 稍微调整下样式
<style lang="less" scoped>
/deep/.el-radio__input {
    position: relative;
    left: 5px;
}
</style>