el-radio的坑

vue项目中：
1.如果不需要显示文字，只需要显示单选框，那就将label隐藏
scss写法

::v-deep .el-radio__label{
    display: none;
}

less写法

/deep/ .el-radio__label{
    display: none;
}

2.el-table中有一列 是默认选中，用到了el-radio单选框，只能有一个选中
获取到的数据格式， isDefault控制是哪一行的radio选中，取值为1表示选中，取值为0不选中

[
    {
        roleId:1,
        roleName:'测试1',
        isDefault:1,
        expDate:'2021-02-09'
    },
    {
        roleId:1,
        roleName:'测试1',
        isDefault:0,
        expDate:'2021-02-09'
    },
    {
        roleId:1,
        roleName:'测试1',
        isDefault:0,
        expDate:'2021-02-09'
    }
]

elementui中radio
要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

处理方法：在vue的data中添加一个roleModel，用于保存isDefault为1的对象中的roleId

代码：

<el-table-column label="默认" prop="isDefault" width="50" align="center">
    <template slot-scope="scope">
        <el-radio
        :label="scope.row.roleId"
        v-model="roleModel"
        ></el-radio>
    </template>
</el-table-column>

当label和v-model的值相同时会选中，获取数据时处理一下

getUserRole({userId:this.userId})
.then(response=>{
    if(response.succ === 'ok'){
        let data = response.result;
        data.forEach(item=>{
            if(item.isDefault){
                this.roleModel = item.roleId;
            }
        })
        this.alreadyHasRoles = response.result;
    }
})