vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇

最新推荐文章于 2023-06-19 11:05:01 发布

草巾冒小子

最新推荐文章于 2023-06-19 11:05:01 发布

阅读量1.5k

点赞数

分类专栏： Vue.js element-ui

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/96569948

版权

Vue.js 同时被 2 个专栏收录

138 篇文章 9 订阅

订阅专栏

element-ui

39 篇文章 5 订阅

订阅专栏

elementUI表格组件，response.data.newsLists列表如何循环出来？如何点击传参numId，并进入对应的内容页？

本文意图：

使用官方table组件：实现API调用：文章遍历、文章列表展示、 “列表页” 点击进入对应的“内容页”，并在内容页显示对应的内容。

读前须知：

使用vue路由，进行传参；
使用vue的路由传参方法，也可以说有两种，第一种router-link :to，第二种是router.push；
本文使用第二种传参方法，注意该传参方法在列表页、内容页的定义方式与代码使用；
路由传参，也可以将参数（如:jobId）映射到url并作为它的组成部分，（如:192.168.0.09:8888/#/jobPost?jobId=182990017273004032）格式定义，可以参考main.js的route基本路由配置;
新闻发布页面也可以通过这种方式实现，具体路由的伪静态处理，也可以仿用。

附：效果图：

在这里插入图片描述

一、首先，服务器请求回来的数据类型：`（代码如下）`

数据类型，请参考开发文档：
已经公示供大家学习使用：

点击查看文档：【 elementUI表格组件：自定义列模板（完整案例）】

二、其次，示例elementUI组件的应用代码：`（代码如下）`

1. 列表页代码：`（列表页）`

自定义table


<!-- 已发布职位list列表 -->
<table class="job_post_lists">
	<tr>
		<th>发布日期</th>
		<th>职位名称</th>
		<th>职位分类</th>
		<th>薪资待遇</th>
		<th>工作地点</th>
		<th>工作经验</th>
		<th>可面试时间</th>
		<th>需要人数</th>
		<th>已收简历数</th>
		<th>佣金</th>
	</tr>
	<tr v-for="(job,key) in jobs" :key="key">
		<td>{{job.updateDate | dateDiff}}</td>
		<td><router-link :to="{name:'jobDetail',params:{jobId: job.id}}">{{job.postName}}</router-link></td>
		<td>{{job.postType}}</td>
		<td>{{job.postMinSalary}}~{{job.postMaxSalary}}K</td>
		<td>{{job.postArea | areaDiff}}</td>
		<td>{{job.postMinExp}}~{{job.postMaxExp}}年</td>
		<td>{{job.remarks}}</td>
		<td>{{job.postDemandNum}}人</td>
		<td>已收到{{job.postInterviewNum}}/{{job.postDemandNum}} 份简历</td>
		<td>{{job.postMaxPrice}}人才币</td>
	</tr>
</table>

官方组件应用代码示下：

<el-table :data="jobs" stripe style="width: 100%" max-height="500">
	<el-table-column fixed="left" label="发布日期" width="120">
		<template slot-scope="scope">
			<i class="el-icon-time"></i>
			<span style="margin-left: 10px">{{ scope.row.updateDate | dateDiff}}</span>
		</template>
	</el-table-column>
	<el-table-column label="职位名称" width="120">
		<template slot-scope="scope">
			<span style="margin-left: 10px" @click="lookJobDetailFun(scope.$index, jobs)">{{ scope.row.postName }}</span>
		</template>
	</el-table-column>
	<el-table-column label="职位分类" width="120">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{{ scope.row.postType }}</span>
		</template>
	</el-table-column>
	<el-table-column label="薪资待遇" width="120">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{{ scope.row.postMinSalary}}~{{ scope.row.postMaxSalary}}K</span>
		</template>
	</el-table-column>
	<el-table-column label="工作地点" width="150">
		<template slot-scope="scope">
			<el-popover trigger="hover" placement="top">
				<p>工作地点：{{ scope.row.postArea }}</p>
				<div slot="reference" class="name-wrapper">
					<el-tag size="medium">{{ scope.row.postArea  | areaDiff}}</el-tag>
				</div>
			</el-popover>
			<!-- <span style="margin-left: 10px">{{ scope.row.postArea  | areaDiff}}</span> -->
		</template>
	</el-table-column>
	<el-table-column label="工作经验" width="100">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{{scope.row.postMinExp}}~{{scope.row.postMaxExp}}年</span>
		</template>
	</el-table-column>
	<el-table-column label="可面试时间" width="150">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{{scope.row.remarks}}</span>
		</template>
	</el-table-column> 
	<el-table-column label="需要人数" width="100">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{{scope.row.postDemandNum}}人</span>
		</template>
	</el-table-column>
	<el-table-column label="已收简历数" width="150">
		<template slot-scope="scope">
			<span style="margin-left: 10px">已收到{{scope.row.postInterviewNum}}/{{scope.row.postDemandNum}}份简历</span>
		</template>
	</el-table-column>
	<el-table-column fixed="right" label="佣金" width="100">
		<template slot-scope="scope">
			<!-- <el-popover trigger="hover" placement="top">
				<p>招聘人数: {{scope.row.postDemandNum}}人</p>
				<p>佣金: {{ scope.row.postMaxPrice}}人才币</p>
				<div slot="reference" class="name-wrapper">
					<el-tag size="medium">{{ scope.row.postMaxPrice }}</el-tag>
				</div>
			</el-popover> -->
			<span style="margin-left: 10px">{{ scope.row.postMaxPrice}}人才币</span>
		</template>
	</el-table-column>
</el-table>

2. 详情页代码：`(内容页)`

<el-row class="detail-div">
	<el-col :span="12" class="title text-left"><p>{{resumeDetails.updateDate | dateDiff}} {{resumeDetails.postName}} <span class="title"> / {{resumeDetails.pType.dictLabel}} </span></p></el-col>
	<el-col :span="12" class="edit text-right"><el-button type="text" class="edit-btn" @click.native.prevent="editAgain(rowdata)">编辑</el-button></el-col>
</el-row>
<el-row :gutter="0" class="detail-p">
	<el-col :xs="12" :sm="12" :md="12" :lg="4" :xl="4"><b>工作经验：</b>{{resumeDetails.postMinExp}}~{{resumeDetails.postMaxExp}}年</el-col>
	<el-col :xs="12" :sm="12" :md="12" :lg="5" :xl="5"><b>学历要求：</b>{{resumeDetails.pEducation.dictLabel}}</el-col>
	<el-col :xs="12" :sm="12" :md="12" :lg="4" :xl="5"><b>需要人数：</b>{{resumeDetails.postDemandNum}}人</el-col>
	<el-col :xs="12" :sm="12" :md="12" :lg="11" :xl="10"><b>要求面试时间：</b>{{resumeDetails.remarks}}</el-col>
</el-row>
<el-row :gutter="0" class="detail-p">
	<el-col :xs="12" :sm="12" :md="12" :lg="5" :xl="4"><b>工作地点：</b>{{resumeDetails.postArea | areaDiff}}</el-col>
	<el-col :xs="12" :sm="12" :md="12" :lg="4" :xl="5"><b>薪资待遇：</b>{{resumeDetails.postMinSalary}}~{{resumeDetails.postMaxSalary}}K</el-col>
	<el-col :xs="12" :sm="12" :md="12" :lg="4" :xl="5"><b>佣金：</b>{{resumeDetails.postMaxPrice}}人才币</el-col>
	<el-col :xs="12" :sm="12" :md="12" :lg="11" :xl="10"><b>福利待遇：</b>{{resumeDetails.pWelfare.dictLabel}}</el-col>
</el-row>
<el-row :gutter="0" class="detail-p">
	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="25"><b>职位描述：</b></el-col>
	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="25">{{resumeDetails.postDescribe}}</el-col>
</el-row>

三、vue的script关键代码：`（代码如下）`

因时间仓促，其他无关功能的代码有些未做剔除处理，可直接忽视。
重要代码均在展示出来的代码块中，可自行比对学习。

1. `（列表页）`（主要代码部分：）

// 查看职位详情
lookJobDetailFun(index, rows) {
	console.log("OK");
	console.log(index+','+rows[index].id);
	console.log(index+','+rows[index].postName);

	// 携带参数id，并传送到内容页，用于内容页接收、匹配、展示对应的信息
	this.$router.push({
		name:'jobDetail',params:{jobId: rows[index].id}
	});
}

浏览器控制台console.log 具体打印：截图省略，下同。

2. `（内容页）` （主要代码部分：）

return {
		isLoading: false, // 拼命加载中
		jobs :[],
		activeName: 'first',
		checkedAll: false, // 全选 
		/* 右侧悬停栏*/
		form: {
			nameJob: "", // 职位名称【大二类】
			minAgeJob: "", //最小年龄
			maxAgeJob: "", //最大年龄
			optionsJob : "", // 职位分类 Select下拉选 【大一类】
			employNumJob: "", // 招聘人数
			commissionJob: "",// 佣金

			areaJob: "", // 工作地址(拼接String)
			areaCode: ['340000','340100','340112'], // 三级联动 地区代码 默认显示 
			detailaddress: "", //手动输入的详细地址					

			minExperienceJob : "", // 工作经验·最小年限
			maxExperienceJob : "", // 工作经验·最大年限
			minSalary: '', // 薪资待遇·最低
			minSalary: '', // 薪资待遇·最高
			educationJob: "", // 学历要求（最高）
			welfareTreatment: [], // 福利待遇
			describeJob: "", // 职位介绍
			interviewTime: "", // 可面试时间
			contactTelphone: "", // 面试电话
		},

		resumeDetails:[], // 当前职位详情 数据存储
		markId:'', // 标记：接收参数
		rowdata:[], // 编辑（提前存储用）
			
			
		dialogShareFormVisible: false, // 弹框:新建分享 默认不显示
		addressOptions: cityOptions.areajson, // 工作地址
		labelWidth: "70px", // 统一定义label宽度
		loading: false, // 刷新加载
		
		// 前后选项字典API对接口
		zwfls: [], // 职位分类
		xls: [],  // 学历
		welfareOptions: [], // 福利待遇：记录所有被选中项的下标
		fldys: [], // 福利待遇
		
		
		// 常见问题：默认显示
		activeCollapseNames: ['1'],
		
	}
		
================= 部分主要代码 ==================
mounted () {
	/* 获取当前职位详情
	this.getJobDetailFun(); */

	//获取当前职位详情页 进来
	this.markId = this.$route.params.jobId;
	
	//console.log(this.$route.params.shareMarked)
	// if(this.markId != ''){
		this.getJobDetailFun(); // 当前职位详情
	// } else {
	// 	alert("F5？");
	// }


},
// 获取 当前职位详情
getJobDetailFun() {
	var key = localStorage.getItem("token");
	console.log("key=" + key)  
	// var that=this.form; // 放置指针，便于then操作的获取       

	var localPath = this.GLOBAL.localSrc;  // 本地 接口地址
	var serverPath = this.GLOBAL.serverSrc; // 线上 接口地址
	console.log("707 this.markId="+this.markId);

	axios.get( serverPath + '/jobpost/getIReleasedPost',
		{
			params:{
				id: this.markId
			},
			headers: {
				'Content-Type':'application/json',
				'Authorization': key
			}
		}
	)
	.then(function (response) {						
		// 未登录：执行跳转
		if (response.data.code == "4007"){
			this.$message({
				type: 'warning',
				message: response.data.message
			}); 
			this.$router.push({
				path: '/login',							
			});							
		}	
		if (response.data.code == "200"){	
			console.log(response.data);		
			this.resumeDetails = response.data.data; // 接收数据 当前职位详情 数组对象
			this.rowdata = response.data.data; // 区分上面的resumeDetails，单独用于“编辑”功能
		}

		localStorage.setItem("token",response.headers.authorization); // token 复写本地 localStorage

		//console.log("authorization="+response.headers.authorization);
		//console.log("reslutData" + reslutData.userName);   

		// // 成功之后执行跳转      
		// this.$router.push({
		// 	path: '/receData',
		// 	query: {
		// 		reslutData
		// 	}
		// });
			
	}.bind(this))
	.catch(function (error) {
			console.log("请求失败"+error);
	});
			
},

以上就是关于“ vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇

elementUI表格组件，response.data.newsLists列表如何循环出来？如何点击传参numId，并进入对应的内容页？这就是本篇博客的阐述意图。效果图：一、首先，服务器请求回来的数据类型：（代码如下）二、其次，示例elementUI组件的应用代码：（代码如下）三、vue的script关键代码：（代码如下）以上就是关于“ vue路由+ elementU...
复制链接

扫一扫