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'}
}
}
浙公网安备 33010602011771号