Table 表格实现上移下移功能

曾经终败给现在 2023-06-16 07:59 47阅读 0赞

# Table 表格实现上移下移功能 #

置顶 2019-10-08 14:19:31 [小伙子。][Link 1] 阅读数 208更多

分类专栏： [js][]

本文链接：[https://blog.csdn.net/weixin\_44096448/article/details/102383743][https_blog.csdn.net_weixin_44096448_article_details_102383743]

> ## **js实现table表格上下移动功能，需要交换行与行的数据内容，即a,b=b,a（一行代码）** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjQ0OA_size_16_color_FFFFFF_t_70][]

>      
> 
> 1.  `<template slot="operation" slot-scope="text, record, index">`
> 2.  `<a @click="delRow(index,record)">`
> 3.  `<a-icon type="delete" theme="twoTone" title="删除"/>`
> 4.  `</a>`
> 5.  `<span style="margin: 0px 15px">|</span><a @click="aMoveUp(index)"`
> 6.  `:disabled="index === 0">上移</a>`
> 7.  `<span style="margin: 0px 15px">|</span><a @click="aMoveDown(index)"`
> 8.  `:disabled="index === dataSource.length-1">下移</a>`
> 9.  `</template>`

> ## **js实现数据互换方式（很多，本文推荐三种）** ##

> 1.声明一个数组，存放上下两行的数据，特别注意，直接用等号赋值会导致视图不及时渲染，值发生了交换，但视图没响应
> 
>      
> 
> 1.  `const data = [this.dataSource[index], this.dataSource[index + 1]]`
> 2.  `// this.dataSource[index] = data[1]`
> 3.  `// this.dataSource[index + 1] = data[0]`
> 4.  `this.$set(this.dataSource, index, data[1])`
> 5.  `this.$set(this.dataSource, index + 1, data[0])`
> 
>      
> 
> 1.  `// 上移`
> 2.  `aMoveUp (index) {`
> 3.  `const data = [this.dataSource[index], this.dataSource[index - 1]]`
> 4.  `this.$set(this.dataSource, index, data[1])`
> 5.  `this.$set(this.dataSource, index - 1, data[0])`
> 6.  `},`
> 
>      
> 
> 1.  `// 下移`
> 2.  `aMoveDown (index) {`
> 3.  `const data = [this.dataSource[index], this.dataSource[index + 1]]`
> 4.  `this.$set(this.dataSource, index, data[1])`
> 5.  `this.$set(this.dataSource, index + 1, data[0])`
> 6.  `}`

> 2.ES6的解构赋值，\[a,b\] = \[b,a\]。试图不渲染需要使用this.$set()
> 
>     [this.dataSource[index], this.dataSource[index + 1]] = [this.dataSource[index+1], this.dataSource[index]]

> 3.运用运算符优先级。a=\[b,b=a\]\[0\]
> 
>     this.dataSource[index] = [this.dataSource[index+1], [this.dataSource[index+1] = [this.dataSource[index]][0]
> 
>      
> 
> 1.  `// 上移`
> 2.  `aMoveUp (index) {`
> 3.  `this.$set(this.dataSource, index, [this.dataSource[index - 1], this.dataSource[index - 1] = this.dataSource[index]][0])`
> 4.  `}`
> 
>      
> 
> 1.  `// 下移`
> 2.  `aMoveDown (index) {`
> 3.  `this.$set(this.dataSource, index, [this.dataSource[index + 1], this.dataSource[index + 1] = this.dataSource[index]][0])`
> 4.  `}`

[Link 1]: https://me.csdn.net/weixin_44096448
[js]: https://blog.csdn.net/weixin_44096448/category_9405959.html
[CC 4.0 BY-SA]: http://creativecommons.org/licenses/by-sa/4.0/
[https_blog.csdn.net_weixin_44096448_article_details_102383743]: https://blog.csdn.net/weixin_44096448/article/details/102383743
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjQ0OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191008141803134.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjQ0OA==,size_16,color_FFFFFF,t_70