element UI使用table表格设置单选

参考文章：https://www.jianshu.com/p/77173ad2c7f2

    <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="caseList"
          border
          tooltip-effect="dark"
          highlight-current-row
          style="width: 100%"
          @current-change="handleSelectionChange"
        >
          <!-- 单选方法,返回选中的表格行 -->
          <el-table-column align="center" label="选择" width="55">
            <!--  // 添加一个多选框,控制选中与否 -->
            <!-- 单选的也可以用单选框,这样效果更明显,选择之后不能取消 -->
            <template slot-scope="scope">
              <el-radio v-model="checked" :label="scope.row.caseId"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
    </el-table>

    // 后台返回data数据
    // 后台数据返回后,手动添加一个checked属性控制选中与否 如果是使用el-rodio单选框,不需要这一步
          data.forEach((item) => {
            item.checked = false;
          });
          this.caseList = data;


    handleSelectionChange(selection) {
      this.caseList.forEach((item) => {
        // 排他,每次选择时把其他选项都清除
        if (item.caseId !== selection.caseId) {
          item.checked = false;
        }
      });
      console.log(selection); // 如果使用单选框,这里可以把当前选中的这一项先保存起来
      // this.ids = selection.map((item) => item.id); // 多选

      // this.ids = [selection.caseId];
    },