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>