解决页面中的顺序调整问题

业务给了一个需求，要求在页面中实现上移、下移、置顶和置底操作。

由于数据量不大，加上加分页功能会加大工具量，于是取消了分页需求。以下附上实现功能的各个方法

/*******基于antd-table实现，dataListOp是表格的数据源，item是当前项，index是当前项的索引 **/

  1     handleCeil(item, index, dataListOP) {
  2       if( index === 0 ) {
  3         Modal.warning({
  4           title: '警告',
  5           content: '当前项已经是第一项了。'
  6         })
  7         return
  8       }
  9       /**交换index与0的位置 */
 10       // dataListOP[0] = dataListOP.splice(index, 1, dataListOP[0])[0] 
 11       /**index置顶，其他顺延 */
 12       let oldFirst = dataListOP[0]
 13       console.log('oldFirst', oldFirst)
 14       dataListOP[0] = dataListOP.splice(index, 1)[0]
 15       dataListOP.splice(1, 0, oldFirst)
 16 
 17       dataListOP = [...dataListOP]
 18       let seqList = []
 19       dataListOP.map( (item, index) => {
 20         seqList.push({
 21           marketProspectId: item.marketProspectId,
 22           displayOrder: index+1
 23         })
 24       })
 25       dispatch({
 26         type: 'marketOutlookList/setSequence',
 27         payload: {
 28           marketProspectList: seqList
 29         },
 30         async: true
 31       })
 32     },
 33     handlegoUp(item, index, dataListOP) {
 34       if( index === 0 ) {
 35         Modal.warning({
 36           title: '警告',
 37           content: '当前项已经是第一项了。'
 38         })
 39         return
 40       }
 41       dataListOP[index] = dataListOP.splice(index-1, 1, dataListOP[index])[0]
 42       console.log("dataListOP =  ", dataListOP);
 43       dataListOP = [...dataListOP]
 44       let seqList = []
 45       dataListOP.map( (item, index) => {
 46         seqList.push({
 47           marketProspectId: item.marketProspectId,
 48           displayOrder: index+1
 49         })
 50       })
 51       dispatch({
 52         type: 'marketOutlookList/setSequence',
 53         payload: {
 54           marketProspectList: seqList
 55         },
 56         async: true
 57       })
 65     },
 66     handleDown(item, index, dataListOP) {
 67       let len = dataListOP ? dataListOP.length-1 : 0;
 68       if( index === len ) {
 69         Modal.warning({
 70           title: '警告',
 71           content: '当前项已经是最后一项了。'
 72         })
 73         return
 74       }
 75       dataListOP[index+1] = dataListOP.splice(index, 1, dataListOP[index+1])[0]
 76       console.log("dataListOP =  ", dataListOP);
 77       dataListOP = [...dataListOP]
 78       let seqList = []
 79       dataListOP.map( (item, index) => {
 80         seqList.push({
 81           marketProspectId: item.marketProspectId,
 82           displayOrder: index+1
 83         })
 84       })
 85       dispatch({
 86         type: 'marketOutlookList/setSequence',
 87         payload: {
 88           marketProspectList: seqList
 89         },
 90         async: true
 91       })
 92     },
 93     handleFloor(item, index, dataListOP) {
 94       let len = dataListOP ? dataListOP.length-1 : 0;
 95       if( index === len ) {
 96         Modal.warning({
 97           title: '警告',
 98           content: '当前项已经是最后一项了。'
 99         })
100         return
101       }
102       //交换当前项和最后一项
103       // dataListOP[len] = dataListOP.splice(index, 1, dataListOP[len])[0]
104       /**index置顶，其他顺延 */
105       let oldFirst = dataListOP[len]
106       console.log('oldFirst', oldFirst)
107       dataListOP[len] = dataListOP.splice(index, 1)[0]
109 
110       console.log("dataListOP =  ", dataListOP);
111       dataListOP = [...dataListOP]
112       let seqList = []
113       dataListOP.map( (item, index) => {
114         seqList.push({
115           marketProspectId: item.marketProspectId,
116           displayOrder: index+1
117         })
118       })
119       dispatch({
120         type: 'marketOutlookList/setSequence',
121         payload: {
122           marketProspectList: seqList
123         },
124         async: true
125       })
126     },

————————————来自大中国的智慧结晶

相关阅读:
如何提高360评估的问卷回收率？
ArcGIS工具统计要素数量
 ArcGIS工具导出空数据库
 ArcEngine开发打开地图读取图层
 ArcGIS工具按要素裁切数据库
 ArcGIS工具批量删除空图层
 ArcGIS工具导出数据库结构
 ArcGIS Python判断数据是否存在
 不能远程登录虚拟机的问题，linux环境下网卡重启
 IDEA安装
原文地址：https://www.cnblogs.com/guoqiaoqiao/p/13597541.html