Vue怎么实现table列表项上下移动

这篇文章主要介绍“Vue怎么实现table列表项上下移动”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue怎么实现table列表项上下移动”文章能帮助大家解决问题。

结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容、列内容、以及此行索引值，

table上绑定数组 :data=“newsList”。

上移和下调两个按钮，并绑定上点击函数，将此行的索引值(scope.$index)作为参数：

<template>
      <el-table :data="newsList">
        <el-table-column type="index"  label="序号" width="50"></el-table-column>
        <el-table-column prop="title" label="文章标题" min-width="300" ></el-table-column>
        <el-table-column prop="descript" label="文章描述" min-width="300" ></el-table-column>
        <el-table-column label="操作(素材排序)"  >
          <template slot-scope="scope">
            <el-button size="mini" type='text'    @click.stop="sortUp(scope.$index, scope.row)">向上↑ </el-button>
            <el-button size="mini" type='text'    @click.stop="sortDown(scope.$index, scope.row)">向下↓</el-button>
          </template>
        </el-table-column>
      </el-table>
</template>

上移下移函数，此处的坑，是vue视图更新！！！

直接使用下面这种方式是错误的，虽然tableList的值变了，但是不会触发视图的更新：

upFieldOrder (index) {
      let temp = this.tableList[index-1];
      this.tableList[index-1]  = this.tableList[index]
      this.tableList[index] = temp
    },

正确方法：

    // 上移按钮
    sortUp (index, row) {
      if (index === 0) {
        this.$message({
          message: '已经是列表中第一个素材！',
          type: 'warning'
        })
      } else {
        let temp = this.newsList[index - 1]
        this.$set(this.newsList, index - 1, this.newsList[index])
        this.$set(this.newsList, index, temp)
      }
    },

同理，下移函数，

    // 下移按钮
    sortDown (index, row) {
      if (index === (this.newsList.length - 1)) {
        this.$message({
          message: '已经是列表中最后一个素材！',
          type: 'warning'
        })
      } else {
        let i = this.newsList[index + 1]
        this.$set(this.newsList, index + 1, this.newsList[index])
        this.$set(this.newsList, index, i)
      }
    }

效果图：

关于“Vue怎么实现table列表项上下移动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。