列表页table.vue
1、页面部分
<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="标题"></el-table-column>
<el-table-column prop="peo" label="姓名" width="180"></el-table-column>
<el-table-column prop="tel" label="手机"></el-table-column>
<el-table-column prop="dataTimes" label="时间"></el-table-column>
<el-table-column label="头像" >
<template scope="scope">
<p class="pic"><img :src="scope.row.pho" :alt="scope.row.peo" /></p >
</template>
</el-table-column>
<el-table-column label="操作">
<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>预览</el-button>
<el-button size="mini" type="primary" v-model="msg" @click="xiugai(scope.$index,scope.row)"><i class="el-icon-edit"></i>修改</el-button>
<el-button size="mini" type="danger" @click="deleteRow(scope.$index,testpage)"><i class="el-icon-delete"></i>删除</el-button>
</template>
</el-table-column>
</el-table>2、js部分
data部分
data() {
return {
value1: '',//时间
url:"/static/list.json", //数据
testpage: [],
msg:'',
id:'',
peo:'',
tel:'',
dataTimes:'',
shuju:'',
ok:false,
}
},数据初始化
created(){
this.getData();
},methods 里
1、先使表格得到数据
//表格数据
async getData(){
let dangqian = this;
let dizhi = await dangqian.$axios.get(dangqian.url);
dangqian.testpage = dizhi.data.imgListData;
console.log(dangqian.testpage);
}, 2、修改方法（页面$route传参）
页面传参有两种方法，我这里用的第一种方法
第一种传参 name 与 结合使用params 相当于post
this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
第二种传参 path 与 query结合使用 ，相当于get ，参数会显示在地址栏里
this.$router.push({path:'路由命名', query:{ 参数名:参数值 } })
//修改
xiugai(index, row) {
this.$message('修改第'+(index+1)+'行');
let zhi = this.testpage[index]; //得到当前行的数据
//、第一种传参 name 与 结合使用params 相当于post
// this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
//简写方法
this.$router.push({name: 'bianji',params:{num:row}})
///第二种传参 path 与 query结合使用 ，相当于get ，参数会显示在地址栏里
///this.$router.push({path:'路由命名', query:{ 参数名:参数值 } })
//this.$router.push({path:'bianji', query:{num:row,from:'table'}})
},编辑页面bianji.vue
页面部分
<el-form ref="biaodan" :model="bianjiye" :rules="guize" class="main" label-width="80px">
<el-form-item label="ID" prop="id">
<!-- 简单写法 v-model="bianjiye.id" 直接写数据表里的名称即可 啰嗦写法写参数名 v-model="bianjiye.pId"-->
<el-input v-model="bianjiye.id"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="peo">
<el-input v-model="bianjiye.peo"></el-input>
</el-form-item>
<el-form-item label="小区标题" prop="title">
<el-input v-model="bianjiye.title"></el-input>
</el-form-item>
<el-form-item label="手机" prop="tel" >
<el-input type="tel" v-model="bianjiye.tel" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="照片" prop="pho" >
<div class="zhaopian">
<img :src="bianjiye.pho" :alt="bianjiye.peo" />
</div>
</el-form-item>
<el-form-item label="时间" prop="dataTimes">
<el-date-picker v-model="bianjiye.dataTimes" type="date" placeholder="选择日期"> </el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('biaodan')">提交</el-button>
<el-button @click="quxiao('an')">取消</el-button>
</el-form-item>
</el-form> js部分
data部分
data(){
return{
//、日期插件end
biaodan: {},
bianjiye:{
id:'',
peo:'',
tel:'',
title:''
},
}
},初始化数据
created() {
this.getinfo();
},接收列表页传过来的数据 写在methods里
同样也是两种写法，我这里用的第一种方法，对应列表页
第一种方法接收参数 params
this.$route.params.传过来的参数;
第二种方法接收参数 query
this.$route.query.传过来的参数名字
路由需要配置一下
{ path: '/页面名字', name:'页面名字', component: '路径/页面名字.vue' },我这里
{ path: '/bianji', name:'bianji', component: resolve => require(['../components/page/bianji.vue'], resolve) }
getinfo() {
let self = this;
//第一种方法接收参数 params
//简单写法 接收参数
self.bianjiye = this.$route.params.num;
// 第二种方法接收参数 query
// this.$route.query.参数名字
// self.bianjiye=this.$route.query.num;
console.log(self.bianjiye)
}, 点击取消返回列表页
//取消按钮
quxiao(){
this.$router.go(-1)
}页面的预览
预览这里我用的当前页面弹窗，如果要跳转的话可以依照编辑一样的方法跳转就可以
预览弹窗，shuju对应列表页里的data
<!-- 预览 -->
<div class="meng" v-if="ok">
<div class="meng-box shuju">
<div class="p-tit">用户相关信息</div>
<ul class="bj-box">
<li>
<div class="lab-left">姓名：</div>
<div>{{shuju.peo}}</div>
</li>
<li>
<div class="lab-left">手机号：</div>
<div>{{shuju.tel}}</div>
</li>
<li>
<div class="lab-left">头像：</div>
<div><img class="tx-img" :src="shuju.pho" :alt="shuju.peo" /></div>
</li>
<li>
<div class="lab-left">最新房源信息：</div>
<div>{{shuju.title}}</div>
</li>
<li>
<div class="lab-left">最新发布时间：</div>
<div>{{shuju.dataTimes}}</div>
</li>
<li>
<div class="lab-left">最新发布房源：</div>
<div><img class="fy-img" :src="shuju.imgUrl" :alt="shuju.imgUrl" /></div>
</li>
</ul>
<div>
<div class="gbBtn" @click="guanbi()">关闭</div>
</div>
</div>
</div>
<!-- 预览 END-->预览方法
预览
yulan(index,row){
let self=this;
// this.$message('预览'+(index+1)+'行')
let iData =row; //得到当前行的数据
console.log(iData)
self.shuju=iData
},js部分，弹窗显示隐藏
aa()与guanbi()对应列表页click的方法 ok对应列表页data里的定义
///显示弹层 关闭弹层
aa(){
if(this.ok == false){
this.ok=true
}
},
guanbi(){
if(this.ok == true){
this.ok=false
}
},假删除
///删除
deleteRow(index, row) {
this.$message.error('删除第'+(index+1)+'行');
//let iList = row;
//console.log(iList)
let pageNum=this.pagesize;//每页数据个数
let yeNum=this.currentPage;//第几页
console.log(yeNum)
//let zhi = this.testpage[index+pageNum*yeNum-pageNum];
//let iList = this.testpage[index+pageNum*yeNum-pageNum];
//console.log(iList)
row.splice(index+pageNum*yeNum-pageNum,1)
},json数据格式
{
"imgListData": [{
"id": "1",
"title": "标题",
"content": "内容 ",
"city": "城市",
"adrs": "地址描述",
"room": "文字描述",
"imgUrl": "图片地址 ",
"dataTimes": "日期",
"peo": "姓名",
"tel": "手机号",
"pho": "img的src地址",
"money": "总价格",
"unitprice": "单价",
"state": "状态",
"gender": "性别",
"tag": [
{
"tags": "标签一"
},
{
"tags": "标签七"
},
{
"tags": "标签八"
}
]
}, {
"id": "2",
"title": "标题",
"content": "内容",
"city": "城市",
"adrs": "地址描述",
"room": "文字描述",
"imgUrl": "图片地址 ",
"dataTimes": "日期",
"peo": "姓名",
"tel": "手机号",
"pho": "img的src地址",
"money": "总价格",
"unitprice": "单价",
"state": "状态",
"gender": "性别",
"tag": [
{
"tags": "标签一"
},
{
"tags": "标签七"
},
{
"tags": "标签八"
}
]
}
]
}
2750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
