vue使用sortablejs实现对<el-table>的行拖拽时，需刷新，才展示结果

Question

问题描述

表格行数据可以进行拖拽，后台数据返回正确，但是页面无法正确展示
找到问题了，that.articleList.splice(newIndex, 0, currRow)这句的问题

代码

html部分

<el-table id="crTable" :data="articleList" v-loading="listLoading" element-loading-text="Loading" highlight-current-row row-key="indexId">
          <el-table-column prop="rank" label="排序" width="65" v-if="!disable">
            <template slot-scope="scope">
              <span class="rank-number" v-show=" !isSort" @click="isSort = true">{{scope.row.rank}}</span>
              <el-input v-model="scope.row.rank" placeholder="请输入内容" size="mini" @keyup.enter.native="handleSorTable()" v-show="isSort"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="标题">
            <template slot-scope="scope">
              <router-link :to="'/backend/article/modify?id='+scope.row.id">{{scope.row.title}}</router-link>
            </template>
          </el-table-column>
          <el-table-column prop="is_recommended" label="推荐" width="200%">
            <template slot-scope="scope">
              <span v-if="scope.row.is_recommended === 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="visible" label="状态" width="200%">
            <template slot-scope="scope">
              <span v-if="scope.row.visible === 1">公开</span>
              <span v-if="scope.row.visible === 0">隐藏</span>
              <span v-if="scope.row.visible === 2">草稿</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
              <router-link :to="'/backend/article/modify?id='+scope.row.id">
                <el-button type="primary" size="mini">编辑</el-button>
              </router-link>
              <el-dropdown>
                <el-button type="info" size="mini" plain>
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <router-link :to="'/backend/preview?id='+scope.row.id" target="_blank">
                    <el-dropdown-item>预览</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item v-if="scope.row.visible === 0||scope.row.visible == 2" @click.native="changeVisible(scope.row.id,1)">公开</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.visible === 1" @click.native="changeVisible(scope.row.id,0)">隐藏</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteArticle(scope.row.id)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

js部分

// 获取文章列表
fetchArticleList() {
      this.disable = !this.changeCategory
      this.isSort = false
      this.pageSize = this.disable ? 10 : 1000
      const params = {
        lang: this.language,
        visible: this.visibleValue,
        cat_id: this.changeCategory,
        page_size: this.pageSize,
        offset: this.offset,
        title: this.title
      }
      getArticleList(params).then(response => {
        this.articleList = response.data.items
        this.totalCount = response.data.total_count
        this.sorTable()
        this.rowDrop()
      })
    }

// 实现行拖拽
rowDrop() {
      const tbody = document.getElementById('crTable').querySelector('.el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = that.articleList.splice(oldIndex, 1)[0]
          that.articleList.splice(newIndex, 0, currRow)
        }
      })
    }

期望

that.articleList.splice(newIndex, 0, currRow)这句代码有问题，拖拽后，console.log的结果正确，但是没有在表格中显示

Answer 1

rowDrop() {
      const tbody = document.getElementById('crTable').querySelector('.el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = that.articleList.splice(oldIndex, 1)[0]
          that.articleList.splice(newIndex, 0, currRow)
          this.articleList = that.articleList
          this.articleList.forEach((element, index) => {
            element.rank = index + 1
          })
          let rank;
          this.articleList.forEach(element => {
            // 这样的方式才可以创建出新对象，从而视图刷新
            rank = Object.assign({}, {
              [element.id]: element.rank
            })
          })
          const data = {
            items: rank
          }
          articleSort(data).then(response => {
            this.$message.success('更改成功')
          })
        }
      })
    }

原因是：
有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

官网链接：
https://cn.vuejs.org/v2/guide...