vue3 elementplus 列表中添加排序功能,移动的时候修改背景色
<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'} } }