技術標籤：vuevue-elementui前端elementui

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;
    }
})