Table多选-弹窗组件-回显-单选

//html
<el-table 
  ref="multipleTableRef" 
  :data="tableData.data" 
  @selection-change="handleSelectionChange" //监听选择变化
>
      <el-table-column  type="selection" :reserve-selection="true" width="55" />
</el-table>



//js

//实际传给父级的多选
const suredata = reactive({
    data:[]
})
//当前选择多选
const delarr = reactive({
    data:[]
})
//选择变化
const handleSelectionChange = (val)=>{
    //让多选变单选，如果要多选，直接将val赋值给delarr.data即可
    if(val.length!=0){
        for(var x = 0;x<val.length;x++){
            if(x==val.length-1){
                multipleTableRef.value.toggleRowSelection(val[x],true);
                delarr.data = []
                delarr.data.push(val[x])
            }else{
                multipleTableRef.value.toggleRowSelection(val[x],false);
            }
        }
    }else{
      //如果清空选择，数组设置为空
        delarr.data = []
    }
}
//监听弹窗关闭
const handleClose = ()=>{
    emits('chooselist',suredata.data)
}
const multipleTableRef = ref(null)
//监听打开弹窗
const handleOpen = ()=>{
  //先清空所有选项
    multipleTableRef.value.clearSelection()
    //只能控制总数组的选中状态，所以需要循环两层
    //通过确认的数组，找到对应总数组的row,然后修改为选中
    tableData.data.forEach(key => {
        suredata.data.forEach(row => {
              if (row.id== key.id) {
                multipleTableRef.value.toggleRowSelection(key,true);
               }
        })
    })
}

//确认选择
const surechoose = ()=>{
  //将临时的赋值给确定传出的
    suredata.data = JSON.parse(JSON.stringify(delarr.data))
    emits('chooselist',suredata.data)
}
//取消选择
const restchoose = ()=>{
    emits('chooselist',suredata.data)
}


//样式
//多选变单选，隐藏表头的全选按钮
/deep/.el-table__header-wrapper .el-checkbox__inner{
    display: none;
}