el-table表格全选反选数据获取以及样式

1.表格头行template部分

<el-table 
    @row-click="handleRowClick"
    :row-class-name="tableRowClassName"
    ref="table">

    <el-table-column label="序号" type="index" :width="selectAll=='序号'? '48px' :'75px'">
        <template #header>
           <div class="indexFont" >
            <span @click="handleHeaderClick" style="display: block;cursor: pointer;">{{selectAll}}</span>
            <span @click="clearSelect" v-show="canChange" style="cursor: pointer;">/反选</span>
            </div>
          </template>
          <template #default="scope">
            <div style="margin-left:7px;">
               {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </div>
            </template>
 </el-table-column>
</el-table>

2.行为script部分

//表格属性
//定义表格
const table= ref()
//定义多个点击事件
const multipleRow = ref<any>([]);
//定义全选flag
const isAllFlag = ref(false);
//定义反选全选
const canChange = ref(false)
const initData=()=>{
total.value=0
multipleRow.value = []
isAllFlag.value = false
canChange.value = false
returnList.value = []
}
//换页
const changePageFlag = ref(false)
//表格点击
const handleRowClick = (val?: any | undefined) => {
  if (!val) return;
  const hasMatchingRow = multipleRow.value.some(element => element.id === val.id);
  if (!hasMatchingRow) {
      multipleRow.value.push(val);
    }
  if (hasMatchingRow) {
    multipleRow.value= multipleRow.value.filter(item=>item.id !== val.id)
    }
};
//定义多选样式变化
const tableRowClassName=ref();
tableRowClassName.value = ({ row }: { row?: any, rowIndex?: number }) => {
  if (!row) return '';
  const hasMatchingRow = multipleRow.value.some(element => element.id === row.id);
  return hasMatchingRow ? 'rowBgCss' : '';
};
//全选反选
const selectAll=computed(()=>{

if(multipleRow.value.length>0){
  isAllFlag.value=true
  canChange.value=true
}else{
  isAllFlag.value=false
  canChange.value =false
}
return multipleRow.value.length>0? '全选' :'序号'
})
//全选操作
const handleHeaderClick= ()=>{
  console.log(multipleRow.value);
  //全选
  if(selectAll.value=='全选'&&isAllFlag.value&&multipleRow.value.length!==total.value){
    getAllList();
    canChange.value = true
  }
}
//反选操作
const clearSelect=()=>{
 //反选
 if(multipleRow.value.length>0){
    multipleRow.value=[]
    isAllFlag.value=false
    canChange.value=false
  }
}
const getAllList = async ()=>{
//不分页全选操作
}

3.最后是样式的style

//单选高光
::v-deep .el-table{
  --el-table-current-row-bg-color:rgba(204, 231, 235, 1) !important;
  height: 74vh !important;
}

//表格高亮
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgba(204, 231, 235, 1) !important;
 
}
//表格多选样式
::v-deep .rowBgCss{
  background-color:rgba(204, 231, 235, 1) !important;
  background: url('~/src/assets/images/checkRowIcon.svg') no-repeat;
  background-position:0;
  z-index:99px;
}



::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td:nth-child(1){
  background-color: rgba(204, 231, 235, 1) !important;
  background: url('~/src/assets/images/checkRowIcon.svg') no-repeat;
  background-position: left;
}


//序号样式
.indexFont{
  margin-left:0px;margin-right:0px; width:fit-content;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: rgba(128, 128, 128, 1);
  display: flex;
}