vue ele table表格 设置只能勾选一个

table 更改属性设置：

<el-table

ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" 

      @select="select" @row-click="rowClick"

      @selection-change="handleSelectionChange"

      stripe >

 

　　

<el-table-column type="selection" width="55" align="center"> </el-table-column>

 

</el-table>

 

methods : 

rowClick(row, column) {

      const selectData = this.selectData;

      this.$refs.multipleTable.clearSelection();

      if (selectData.length == 1) {

        selectData.forEach((item) => {

          // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中

          if (item == row) {

            this.$refs.multipleTable.toggleRowSelection(row, false);

          }

          // 不然就让当前的一行勾选

          else {

            this.$refs.multipleTable.toggleRowSelection(row, true);

          }

        });

      } else {

        this.$refs.multipleTable.toggleRowSelection(row, true);

      }

    },

 

async select(selection, row) {

      await this.$refs.multipleTable.clearSelection(); // 执行完清空操作在进行下面的勾选

      if (selection.length === 0) return;

      this.$refs.multipleTable.toggleRowSelection(row, true);

    },

 

handleSelectionChange(val) {

      this.selectData = val; //表格选中数据接收

    },

 

scss

/deep/.el-table__header-wrapper {

  .el-checkbox__inner {

    display: none;

  }

}