Vue怎么實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)

這篇文章主要介紹“Vue怎么實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue怎么實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)”文章能幫助大家解決問題。

結(jié)合Element組件，scope中有三個(gè)參數(shù)（row，cow，$index）分別表示行內(nèi)容、列內(nèi)容、以及此行索引值，

table上綁定數(shù)組 :data=“newsList”。

上移和下調(diào)兩個(gè)按鈕，并綁定上點(diǎn)擊函數(shù)，將此行的索引值(scope.$index)作為參數(shù)：

<template>
      <el-table :data="newsList">
        <el-table-column type="index"  label="序號(hào)" width="50"></el-table-column>
        <el-table-column prop="title" label="文章標(biāo)題" 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>

上移下移函數(shù)，此處的坑，是vue視圖更新?。?！

直接使用下面這種方式是錯(cuò)誤的，雖然tableList的值變了，但是不會(huì)觸發(fā)視圖的更新：

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: '已經(jīng)是列表中第一個(gè)素材！',
          type: 'warning'
        })
      } else {
        let temp = this.newsList[index - 1]
        this.$set(this.newsList, index - 1, this.newsList[index])
        this.$set(this.newsList, index, temp)
      }
    },

同理，下移函數(shù)，

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

效果圖：

關(guān)于“Vue怎么實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。