如何将el-table多选表格变为单选形式

在使用饿了么表格的时候，发现官方默认的单选表格是点击表格行选中，只有一个变色提示，很容易被误认为只是hover，如下图：

而在较为严谨的后台项目里，我们需要给用户一个明确的选中感。于是乎，我们可以对默认的多选表格进行一些改造实现我们的目的，先放效果图：

直接上代码,HTML部分：

<el-table :data="sequenceList" ref="sequenceTable" style="width: 100%" @select="selectRow" class="checkTable">
  <el-table-column type="selection" width="55">el-table-column>
  <el-table-column align="center" prop="id" label="序列id">el-table-column>
  <el-table-column align="center" prop="seriesNo" label="序列编号">el-table-column>
  <el-table-column align="center" prop="modality" label="设备类型">el-table-column>
  <el-table-column align="center" prop="bodyPart" label="部位">el-table-column>
  <el-table-column align="center" prop="fileCount" label="文件数量">el-table-column>
el-table>

JS部分：

selectRow(val, row) {
  this.$refs.sequenceTable.clearSelection();
  this.$refs.sequenceTable.toggleRowSelection(row, true);
  this.seriesId = row.id
}

没错其实很简单，就是利用了el-table的select事件，选中某一行时，调用该表格的clearSelection()与toggleRowSelection()方法，先清空之前选中行，再选中当前行，注意调用顺序就好，然后用row.XXX就可以获取选中行的数据进行后续操作啦。

最后别忘了把表头的全选按钮去掉，CSS部分：

.checkTable > .el-table__header-wrapper > table > thead > tr > th:first-child > div {
	display: none!important;
}

最前面的checkTable是el-table的类名，后面一大串都是饿了么生成的结构，把checkTable改成你自己的表格类名就行。