vue3 elementplus 列表中添加排序功能,移动的时候修改背景色

发布时间 2023-09-14 17:25:20作者: flyComeOn
 <el-table
            size="medium"
            :border="true"
            :data="branchTableData"
            :row-style="changeColor"
            :stripe=false
            style="width: 100%;">
            <el-table-column  type="index" label="NO." align="center" width='55px'/>
            <el-table-column prop="customerName" label="所属客户"   />
            <el-table-column prop="branchName" label="网点名称" />
            <el-table-column prop="note" label="备注"/>
            <el-table-column  label="操作" width="150px">
              <template #default="scope">
                <el-popconfirm :title="`确定删除这条记录吗`" width="260px" @confirm="delBranch(scope.row)">
                  <template #reference>
                    <el-button type="danger" title="删除" icon="Minus" size="small" circle plain></el-button>
                  </template>
                </el-popconfirm>
                <el-button  type="primary" title="上移" icon="ArrowUpBold" size="small"  circle plain  :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)" />
                <el-button  type="success" title="下移" icon="ArrowDownBold" size="small"  circle plain :disabled="scope.$index === branchTableData.length -1 "  @click="moveDown(scope.$index, scope.row)"  />
              </template>
            </el-table-column>
          </el-table>

  二、具体方法

// 排序上移
const moveUp =(index:any,row:any) =>{
  if(index > 0){
    const up = branchTableData[index-1]
    branchTableData.splice(index-1,1);
    branchTableData.splice(index,0,up);
    selectedIndex.value = index-1;
  }else{
    ElMessage({message:'当前网点已是第一个,不可上移!',type:'warning'})
  }
}
// 排序下移
const moveDown =(index:any,row:any) =>{
  if(index + 1 === branchTableData.length){
    ElMessage({message:'当前网点已是最后一个,不可下移!',type:'warning'})
  }else{
    const down = branchTableData[index+1]
    branchTableData.splice(index+1,1);
    branchTableData.splice(index,0,down);
    selectedIndex.value = index+1;
  }
}
const selectedIndex=ref();
const changeColor =({ row,rowIndex }) =>{
  if(rowIndex === selectedIndex.value){
    return {'background-color':'#a0cfff', 'font-weight':'bold'}
  } 
  if(rowIndex % 2 === 0){
     return {'background-color':'#fff'}
  }
  else{
    return {'background-color':'#fafafa'}
  }
}