vue elementui點擊表格當前行radio單選選中

官方文檔：https://element.eleme.cn/#/zh-CN/component/radio

參考：https://www.cnblogs.com/steamed-twisted-roll/p/10120106.html

　　　https://segmentfault.com/q/1010000016009668

　　　https://segmentfault.com/q/1010000018827314

關鍵的幾個配置：

　　higlight-current-row　　　// element-ui提供的單選方法，可以使當前選中行高亮

　　@current-change="handleSelectionChange"　　//單選方法，返回選中的表格行　

　　使用v-model綁定單選框，

　　:label的綁定屬性為:label="scope.row.id"，采用每條項目唯一的標識值

　　handleSelectionChange的方法使用this.radio = row.id來選中單選按鈕

　　@row-click="chooseone"：單擊數據行

      <el-table
        :data="list"
        height="500"
        border
        style="width: 100%"
        @row-click="chooseone"
        @row-dblclick="openDetails"
        highlight-current-row
        @current-change="handleSelectionChange"
      >

        <el-table-column width="55">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.id">
              <span class="el-radio__label"></span>
            </el-radio>
          </template>
        </el-table-column>

 data() {
    return {
      total: 0, //總記錄數
      currentPage: 1, //當前頁碼
      pageSize: 10, // 每頁顯示10條數據
      list: [],
      radio: null, // 如果使用單選框，定義一個model值
      currentSelectItem: {} //當前選中的值
    };

    handleSelectionChange(row) {
      console.log(row);
      this.currentSelectItem = row;
    }

    chooseone(row){
      this.radio = row.id
    },