elementUI中的Table組件數(shù)據(jù)變化后表格不會重新渲染問題怎么解決?

當(dāng)排序時候 調(diào)用sortchange鉤子函數(shù)，然后會觸發(fā)initsort方法，我本想讓第一行不出現(xiàn)上移的圖片（強制把排序后的圖片更新，沒成功），但是table的數(shù)據(jù)變化了，但是頁面沒有變化！請問為什么會這樣？

<template>
  <div>

    <!--音頻分集-->
    <div class="brand">
      <el-breadcrumb class="brand">
        <el-breadcrumb-item>系統(tǒng)首頁</el-breadcrumb-item>
        <el-breadcrumb-item>音頻分集</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="pad">

      <div>
        <el-container>
          <el-header>
            <i class="icon iconfont icon-icon--"></i>
            <span>分集列表（3集）</span>
          </el-header>
          <el-main>
            <el-table
              :data="tableData"
              @sort-change = 'sortchange'

              style="width: 100%">
              <el-table-column
                prop="id"
                label="編號"
                sortable
                width="220%"
              >
              </el-table-column>

              <el-table-column
                prop="audioName"
                label="音頻名稱"
                sortable
                width="220%">
              </el-table-column>

              <el-table-column
                prop="format"
                label="格式"
                width="220%">
              </el-table-column>

              <el-table-column
                prop="format"
                label="格式"
                width="220%">
              </el-table-column>

              <el-table-column
                prop="quantity"
                label="閱讀量"
                sortable
                width="220%">
              </el-table-column>

              <el-table-column prop="sort" label="排序" width="220%">
                <template slot-scope="scope">
                  <img v-show="scope.row.downimg" :src="scope.row.downimg" width="12%">
                  <img v-show="scope.row.upimg" :src="scope.row.upimg" width="12%">
                </template>
              </el-table-column>

            </el-table>
          </el-main>
        </el-container>

      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import downimg from '@/assets/xiayi.png'
  import upimg from '@/assets/shangyi.png'
 

  export default {
    name: "video-diversity",
    created(){
     this.initsort()
    },
    data() {
      return {
        audioname: '',
        tableData: [
          {
          id: '100001',
          audioName: '001-走向中考考場·七年級道德與法治',
          format: 'MP3',
          size: '10M',
          quantity: 23434,
          downimg: downimg,
          upimg: upimg,
        }, {
          id: '100002',
          audioName: '003-走向中考考場·七年級道德與法治',
          format: 'MP3',
          size: '10M',
          quantity: 4534,
          downimg: downimg,
          upimg: upimg,
        }, {
          id: '100003',
          audioName: '005-走向中考考場·七年級道德與法治',
          format: 'MP3',
          size: '10M',
          quantity: 45340,
          downimg: downimg,
          upimg: upimg,
        }
        ],
      }
    },
    methods: {
      search() {
        console.log(this.audioname);
      },
      sortchange(obj){
        this.initsort()
      },
      initsort(){
        Vue.set(this.tableData[0], 'upimg', '')
        Vue.set(this.tableData[this.tableData.length-1], 'downimg', '')

           this.tableData = this.tableData.filter(function (item) {
          console.log(item);
          return item
        })

      },
      downclick(a,b,c){
        console.log(a);

      },
      upclick(){

      }
    },
    watch:{
      'tableData':function (newval,oldval) {
        console.log(newval);
      },
    },
    beforeUpdate(){
      // debugger
      Vue.set(this.tableData[0], 'upimg', '')
      Vue.set(this.tableData[this.tableData.length-1], 'downimg', '')
    }

  }
</script>