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


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.
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-1b317ab-2bd90.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-1b317ab-2bd90.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?