element table單選,首列顯示單選框

表格内容,資料

highlight-current-row --點選目前行高亮

<el-table 
:data="tableData" 
border
highlight-current-row
@current-change="handleRadioChange">
    <el-table-column laebl="選擇" width="60px" align="center">
        <template slot-scope="scope">
            <el-radio v-model="radioSelected" :label="scope.row.modelCode">&nbsp;</el-radio>
        </template>
    </el-table-column>
    <el-table-column prop="modelType" label="模型類型"> </el-table-column>
    <el-table-column prop="modelCode" label="模型編号"> </el-table-column>
    <el-table-column prop="modelName" label="模型名稱"> </el-table-column>
</el-table>
 
data(){
   return{
      tableData: [
        {
          modelType: "城投",
          modelCode: "CT001",
          modelName: "城投債xxxxx-1",
        },
        {
          name: "城投",
          modelCode: "CT002",
          modelName: "城投債xxxxx-2",
        },
        {
          name: "城投",
          modelCode: "CT003",
          modelName: "城投債xxxxx-3",
        },
        {
          name: "城投",
          modelCode: "CT004",
          modelName: "城投債xxxxx-4",
        },
     ],
     radioSelected:null
   }
}
 
           

methonds方法

methods: {
    handleRadioChange(val){
      this.radioSelected = val.modelCode;//點選目前行時,radio同樣有選中效果
    },
}
           

style樣式

/deep/ .el-radio__label{
	display:none;//隐藏raidio展示的label及本身自帶的樣式
}