Vue elementui table单选

• 利用type="selection"，除了设置其选项改变事件外，还需要设置其ref属性，设置ref的目的是能在方法中通过

<el-table
  ref="tableList"
  v-loading="listLoading"
  :data="listData"
  border
  fit
  stripe
  highlight-current-row
  style="width: 100%;"
  @sort-change="sortChange"
  @selection-change="handleSelectionChange"
  @row-click="handleClickTableRow"
  @select-all="selectAll" 
>
  <el-table-column type="selection" width="55" />
  <el-table-column
    v-if="tableColoumVal[0].visible"
    label="订单号"
    width="190"
  >
    <template slot-scope="{ row }">
      <span>{{ row.orderId }}</span>
    </template>
  </el-table-column>
</el-table>



<scritp>
data() {
    retrun {
        multipleSelection: null
    }
}

// 选择复选框
handleSelectionChange(val) {
  this.multipleSelection = val[0];
  if (val.length > 1) {
    this.$refs.tableList.clearSelection();
    this.$refs.tableList.toggleRowSelection(val.pop());
  }
},
// 选中行
handleClickTableRow(row) {
  this.$refs.tableList.toggleRowSelection(row);
},
// 取消选中
selectAll() {
  this.$refs.tableList.clearSelection() //用于多选表格，清空用户的选择
},
</script>

• 此方法的实现逻辑就是，通过设置的ref属性和 this.$refs.tableList来获取这个table，然后判断选择项的数组selection的长度大于1的话就清除数组并设置选择最后一次选中的项。并且通过

this.multipleSelection = val[0];

• 效果