Element UI表头禁止多选和行实现单选功能

Element UI的Table提供了多选功能，如下图，

但是有时候我们只需要选择其中的一行数据，这时我们可以通过table的select和select-all两个事件来实现，当选择一行数据时table会触发select,点表头时选择框时会触发select-all，

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @select="rowClick" @select-all="selectAll">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

实现rowClick和selectAll两个方法如下：

rowClick(selection, row) {
      if( selection.length > 1 ) {
        this.$refs.multipleTable.toggleRowSelection(selection[0],false);
      }
 },
selectAll() {
  this.$refs.multipleTable.clearSelection();
}

这样当点击表头的选择框时就不会全选下面的数据了，点击其中一行时，会把上一次选择的清除，实现单选功能。