elementUI，多选表格实现单选操作

<el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="53vh"
        @row-click="toStaffDetail"
        @select="userChoose"
      >
        <el-table-column type="selection"></el-table-column>
        <!-- 循环展示表头 -->
        <template v-for="(col) in tableHeaderData">
          <el-table-column
            :prop="col.dataProp"
            :label="col.dataName"
            :key="col.dataProp"
          ></el-table-column>
        </template>
      </el-table>
     <script>
		userChoose(selection, row) {
         //clearSelection：用于多选表格，清空用户的选择
         //此时所有的checkbox处于未勾选，当用户第一次点击的时候，selectio为一个数组，里面存放的为当前这一行的数据
         this.$refs.multipleTable.clearSelection();
         //此时selection仍然有值 ，只是勾选状态不显示了。
	      if (selection.length === 0) {
	        return;
	      }
	      //这这里将这行的状态又变为了勾选
	      this.$refs.multipleTable.toggleRowSelection(row, true);
	      //用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    },
    </script>

上面为简单的代码展示，我们想要实现，elementUI中多选表格中实现单选，这种一般都是基于Api进行的一些操作，查询API我们可以知道：

在Table Events中有一个select事件：当用户手动勾选数据行的 Checkbox 时触发的事件，该函数节接受两个参数selection，row`,基于这个函数我们再借助别的API就可以实现我们想要的效果了

由于对于elementUI的API不够熟练，在开发过程中遇到了很多的问题，相信随着实践经验的积累，自己在项目中也会越来越熟练。