How to solve the problem that the table will not be re-rendered after the data of the Table component in elementUI changes?

the sortchange hook function is called when sorting, and then the initsort method is triggered. I wanted to keep the first row from moving up (forcing the sorted image to be updated without success), but the table data changed, but the page did not change! Excuse me, why is this happening? 

<template>
  <div>

    <!---->
    <div class="brand">
      <el-breadcrumb class="brand">
        <el-breadcrumb-item></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>

clipboard.png

React.js javascript vue.js element-ui
Apr.03,2021

ide/list.html-sharp%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B" rel=" nofollow noreferrer "> vue array update detection
Sorry to glance at your question at noon and feel that it may be due to the reason that the array update is not detected. I actually tested it just now. In fact, you can trigger updates when you write like this, and the specific reason why you can't do so is because the code is incomplete and there is no way to analyze

< H2 > attach jsfiddle test address < / H2 >

I've seen your code. You just enable sortable and do not set sortable to custom to enable custom sorting. In this case, el-table does not change the sorting order of your tableData , so it certainly can't achieve the effect of hiding from head to tail

.

this provides you with a relatively simple way to implement. Just judge whether it is the first or last row by the index of the current column. 

<el-table-column prop="sort" label="" width="220%">
  <template slot-scope="{row, $index}">
    <el-button v-show="!!$index" :icon="downimg"></el-button>
    <el-button v-show="$index < tableData.length - 1" :icon="upimg"></el-button>
    <!--
     <img v-show="!!$index" :src="downimg" width="12%">
     <img v-show="$index < tableData.length - 1" :src="upimg" width="12%">
     -->
  </template>
</el-table-column>

this implementation can put downimg and upimg in data, instead of assigning values to every data, it is more scientific and saves memory

. 
data() {
  return {
    downimg: downimg,
    upimg: upimg,
    audioname: '',
    tableData: [

https://github.com/livelyPeng. smooth rendering of 10,000-level data does not affect the original functions of the element-ui el-table component, and some new features

have been added.

Previous: Asp.net WeChat Pay, sometimes he can pay successfully, but sometimes he will call the payment JSAPI and lack the parameter package.

Next: Python select sets the timeout. After a while, it does not return.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bdecb6-54086.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bdecb6-54086.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?