el-table实现单选（radio，checkbox多选改成单选）、多选，以及清空和回显

一、实现单选radio

1、table 部分

<el-table
    :data="tableData"
    @row-click = "showRow"
>
    // 添加column
    <el-table-column label="选择" width="50" align="center">
        <template scope="scope">
          <el-radio class="radio"  v-model="radio"  :label="scope.row.id">
              // 这里目的是为了实现单选
              &nbsp;
          </el-radio>
       </template>
    </el-table-column>
</el-table>

2、data部分

data:{
	tableData: [],
    // 单选（null清空状态）
	radio: null,
	selected:{}
},

3、method 部分

showRow(row){
    //赋值给radio
    this.radio = this.tableData.indexOf(row);
    this.selected=row;
},

清空状态设置radio = null；回显给radio赋值

二、实现checkbox多选改成单选

1、table 部分

<el-table
    :data="table"
     ref="table"
    @selection="handleSelection"
> 
    <el-table-column
      type="selection"
      align="center"
      width="55">
    </el-table-column>
</el-table>

2、data 部分

data:{
    table: [],
    row : null,
},

3、method 部分

    // 点击表格中的行
    handleSelection(selection, row) {
      // 取消之前的选择
      if (this.row) {
        this.$refs.table.toggleRowSelection(this.row, false);
      }
      this.row = row;
    },
    // 清空表格选中的项
    clearSelect() {
      if (this.row) {
        this.$refs.table.clearSelection();
      }
    },

清空状态设置row= null；回显给row赋值

4、css部分

// 隐藏表格的全选按钮
::v-deep.el-table {
  .el-table__header-wrapper {
    .el-table-column--selection {
      .el-checkbox {
        display: none;
      }
    }
  }
  .el-table__fixed {
    .el-table__fixed-header-wrapper {
      .el-table-column--selection {
        .el-checkbox {
          display: none;
        }
      }
    }
  }
}

三、实现多选

1、table 部分

<el-table
    :data="tableData"
     ref="multipleTable"
    @selection-change="handleSelectionChange"
> 
    <el-table-column
      type="selection"
      align="center"
      width="55">
    </el-table-column>
</el-table>

2、data 部分

data:{
    tableData: [],
    multipleSelection: []
},

3、method 部分

handleSelectionChange(val) {
      this.multipleSelection = val;
},