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来选中单选按钮

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

 

来源：https://www.cnblogs.com/flypig666/p/11679566.html