Table 表格实现上移下移功能

Table 表格实现上移下移功能

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

分类专栏： js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44096448/article/details/102383743

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

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. }