vue+element中table框在最前面加复选框变单选的问题

1.先看一下效果：

就是这样的一种效果，下面就是关键代码：

ref="multipleTable" @select="handleSelect" @selection-change="handleSelectionChange"

关键代码就是这个，在table里写上就可以了

.tablessp thead tr .el-checkbox__input{
     display: none;
}

这个是控制是否显示最上面的全选框

<template>
  <div id="app">
    <el-table class="tablessp" ref="multipleTable"
     @select="handleSelect" @selection-change="handleSelectionChange" 
     :key="tableKey" :data="tableData" row-key="id" height='200' 
     border fit highlight-current-row 
     style="width: 100%;margin-top:8px;min-height:500px"
      :header-cell-style="{background:'#199ED8'}">
      <el-table-column type="selection" width="60" align="center"></el-table-column>
      <el-table-column align="center" prop="date" label="日期" min-width="80"></el-table-column>
      <el-table-column align="center" prop="name" label="名字" min-width="80"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" min-width="80"></el-table-column>
     
   </el-table>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          tableData: [{
            id:1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id:3,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            id:4,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id:8,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          tableKey: 0,
          cutId:'',
        }
        
      },
      methods: {
        // 勾选的时候来判断 让其变成单选
          handleSelect(val,row){
             if (val.length > 1) {
                this.$refs.multipleTable.clearSelection() // 清空所有选择
                val.shift()
                this.$refs.multipleTable.toggleRowSelection(row) //  选中当前选择
           }

           let selected = val.length && val.indexOf(row) !== -1
              console.log(selected)  // true就是选中，0或者false是取消选中
          },
          handleSelectionChange(val){
           let posy = val
            let pos = []
            posy.forEach(item=>{
               pos.push(item.id)
               this.cutId = pos.join(',')//把选中的id已字符串传递出去  例如：'1,3,4,5'
            })
            console.log(this.cutId)
          }
      },
  }
</script>

<style>
.tablessp thead tr .el-checkbox__input{
     display: none;
}
.tablessp.el-table thead{
  color:#fff;
}
</style>