vue+el實現table中行的上移和下移

 

  <el-table-column :label="" fixed="right" align="center" width="280">
                      <template #default="scope">
                        <el-icon  :size="20" style="margin-left:20px;" @click="handleSortUp(scope.$index,scope.row)" v-if="scope.$index!=0" >
                          <i-top color="#409eff"/>
                        </el-icon>
                        <el-icon  :size="20" style="margin-left:20px;" @click="handleSortDown(scope.$index,scope.row)" v-if="scope.$index!=(feeRuleTableData.length-1)" >
                          <i-bottom color="#409eff" />
                        </el-icon>
                        <el-icon :size="20" style="margin-left:20px;" @click="handleDelRuleId(scope.$index,scope.row)">
                        <i-delete  color="#409eff"/>
                        </el-icon>          
                      </template>
                    </el-table-column>
                    
export default defineComponent({
 setup(props, ctx) {                    
    let feeRuleTableData=ref([])

 const handleSortUp= (index,row) => {
      console.log('上移',index,row);
      console.log(feeRuleTableData.value[index]);
      if (index > 0) {
          let upDate = feeRuleTableData.value[index - 1];
          feeRuleTableData.value.splice(index - 1, 1);
          feeRuleTableData.value.splice(index,0, upDate);
          form.value.feeRuleIdList= feeRuleTableData.value.map(item=>item.ruleId).join('|')
      } else {
        //alert('已經是第一條，不可上移');
      }
    }
    const handleSortDown= (index,row) => {
      console.log('下移',index,row);
      console.log(feeRuleTableData.value[index]);
      if ((index + 1) === feeRuleTableData.value.length){
        //alert('已經是最後一條，不可下移');
      } else {
        let downDate = feeRuleTableData.value[index + 1];
        feeRuleTableData.value.splice(index + 1, 1);
        feeRuleTableData.value.splice(index,0, downDate);
        form.value.feeRuleIdList= feeRuleTableData.value.map(item=>item.ruleId).join('|')
      }
    }
     return {
     feeRuleTableData,
     handleSortUp,
     handleSortDown
     }
     })