List page
1. Page section
<el-table :data="testpage.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" >
<el-table-column prop="id" :inputValue="msg" label="ID" width="180"></el-table-column>
<el-table-column prop="title" label="Title"></el-table-column>
<el-table-column prop="peo" label="Full name" width="180"></el-table-column>
<el-table-column prop="tel" label="Mobile phone"></el-table-column>
<el-table-column prop="dataTimes" label="time"></el-table-column>
<el-table-column label="Head portrait" >
<template scope="scope">
<p class="pic"><img :src="scope.row.pho" :alt="scope.row.peo" /></p >
</template>
</el-table-column>
<el-table-column label="operation">
<template slot-scope="scope">
<el-button size="mini" type="success" @click="yulan(scope.$index,scope.row),aa()" class="yl-sty"><i class="el-icon-search"></i>preview</el-button>
<el-button size="mini" type="primary" v-model="msg" @click="xiugai(scope.$index,scope.row)"><i class="el-icon-edit"></i>modify</el-button>
</template>
</el-table-column>
</el-table>2, part js
Part data
data() {
return {
value1: '',//time
url:"/static/list.json", //data
testpage: [],
msg:'',
id:'',
peo:'',
tel:'',
dataTimes:'',
shuju:'',
ok:false,
}
},Data initialization
created(){
this.getData();
},In methods
1. Get the data from the table first
//Tabular data
async getData(){
let dangqian = this;
let dizhi = await dangqian.$axios.get(dangqian.url);
dangqian.testpage = dizhi.data.imgListData;
console.log(dangqian.testpage);
}, 2. Modification method (page $route parameter)
There are two methods for page parameter passing, the first one I use here
The first type of parameter name and the combination of params is equivalent to post
this.$router.push({name: 'route name', params: {parameter name: parameter value, parameter name: parameter value}})
The second type of parameter path is used in combination with query, which is equivalent to get. The parameter will be displayed in the address bar
this.$router.push({path: 'route name', query: {parameter name: parameter value}})
//modify
xiugai(index, row) {
this.$message('Amendment No.'+(index+1)+'That's ok');
let zhi = this.testpage[index]; //Get the data of the current row
//. the first type of parameter name and the combination of params are equivalent to post
// this.$router.push({name: 'route name', params: {parameter name: parameter value, parameter name: parameter value}})
//Abbreviation method
this.$router.push({name: 'bianji',params:{num:this.testpage[index]}})
///The second type of parameter path is used in combination with query, which is equivalent to get. The parameter will be displayed in the address bar
///this.$router.push({path: 'route name', query: {parameter name: parameter value}})
//this.$router.push({path:'bianji', query:{num:zhi.id,name:zhi.peo,phos:zhi.tel,times:zhi.dataTimes,from:'table'}})
},Edit page
Page part
<el-form ref="biaodan" :model="bianjiye" :rules="guize" class="main" label-width="80px">
<el-form-item label="ID" prop="id">
<!-- Simple writing v-model="bianjiye.id" Write the name in the data table directly, and then write the parameter name verbosely v-model="bianjiye.pId"-->
<el-input v-model="bianjiye.id"></el-input>
</el-form-item>
<el-form-item label="Full name" prop="peo">
<el-input v-model="bianjiye.peo"></el-input>
</el-form-item>
<el-form-item label="Community title" prop="title">
<el-input v-model="bianjiye.title"></el-input>
</el-form-item>
<el-form-item label="Mobile phone" prop="tel" >
<el-input type="tel" v-model="bianjiye.tel" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="Photo" prop="pho" >
<div class="zhaopian">
<img :src="bianjiye.pho" :alt="bianjiye.peo" />
</div>
</el-form-item>
<el-form-item label="time" prop="dataTimes">
<el-date-picker v-model="bianjiye.dataTimes" type="date" placeholder="Selection date"> </el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('biaodan')">Submission</el-button>
<el-button @click="quxiao('an')">cancel</el-button>
</el-form-item>
</el-form> Part js
Part data
data(){
return{
//, date plug-in end
biaodan: {},
bianjiye:{
id:'',
peo:'',
tel:'',
title:''
},
}
},Initialization data
created() {
this.getinfo();
},Receive the data from the list page and write it in methods
There are also two ways of writing. The first way I use here corresponds to the list page
The first method receives params
this.$route.params;
The second method receives the parameter query
Parameter name passed from this.$route.query
getinfo() {
let self = this;
//The first method receives params
//Simple write to receive parameters
self.bianjiye = this.$route.params.num;
// The second method receives the parameter query
// this.$route.query. Parameter name
// var pId = this.$route.query.num;
// self.bianjiye={pId};
console.log(self.bianjiye)
}, Click Cancel to return to the list page
//Cancel button
quxiao(){
this.$router.go(-1)
}Preview the pop-up window of the current page I use here. If you want to jump, you can jump in the same way as you edit
Preview pop-up window, shuju corresponds to the data in the list page
<!-- preview -->
<div class="meng" v-if="ok">
<div class="meng-box shuju">
<div class="p-tit">User related information</div>
<ul class="bj-box">
<li>
<div class="lab-left">Full name:</div>
<div>{{shuju.peo}}</div>
</li>
<li>
<div class="lab-left">Cell-phone number:</div>
<div>{{shuju.tel}}</div>
</li>
<li>
<div class="lab-left">Head portrait:</div>
<div><img class="tx-img" :src="shuju.pho" :alt="shuju.peo" /></div>
</li>
<li>
<div class="lab-left">Latest Listings:</div>
<div>{{shuju.title}}</div>
</li>
<li>
<div class="lab-left">Latest release time:</div>
<div>{{shuju.dataTimes}}</div>
</li>
<li>
<div class="lab-left">Latest Listings:</div>
<div><img class="fy-img" :src="shuju.imgUrl" :alt="shuju.imgUrl" /></div>
</li>
</ul>
<div>
<div class="gbBtn" @click="guanbi()">Close</div>
</div>
</div>
</div>
<!-- preview END-->js part, pop-up display hidden
aa() and guanbi() correspond to the definition in the list page data
///Show bomb layer close bomb layer
aa(){
if(this.ok == false){
this.ok=true
}
},
guanbi(){
if(this.ok == true){
this.ok=false
}
},