elementUI表格实现单选功能

2020-08-11  本文已影响0人  前端新阳

【效果】

image.png

【代码】

<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>
   
上一篇 下一篇

猜你喜欢

热点阅读