vue路由+elementUI表格组件：loop⽂章列表页enter内容页（vue路由传参。。
。
elementUI表格组件，wsLists列表如何循环出来？如何点击传参numId，并进⼊对应的内容页？
本⽂意图：
使⽤官⽅table组件：实现API调⽤：⽂章遍历、⽂章列表展⽰、 “列表页” 点击进⼊对应的“内容页”，并在内容页显⽰对应的内容。
读前须知：
1. 使⽤vue路由，进⾏传参；
2. 使⽤vue的路由传参⽅法，也可以说有两种，第⼀种router-link :to，第⼆种是router.push；
3. 本⽂使⽤第⼆种传参⽅法，注意该传参⽅法在列表页、内容页的定义⽅式与代码使⽤；
4. 路由传参，也可以将参数（如:jobId）映射到url并作为它的组成部分，（如:192.168.0.09:8888/#/jobP
ost?
jobId=182990017273004032）格式定义，可以参考main.js的route基本路由配置;
5. 新闻发布页⾯也可以通过这种⽅式实现，具体路由的伪静态处理，也可以仿⽤。
附：效果图：
⼀、⾸先，服务器请求回来的数据类型：（代码如下）
数据类型，请参考开发⽂档：
已经公⽰供⼤家学习使⽤：
点击查看：
⼆、其次，⽰例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>{{arks}}</td>
<td>{{job.postDemandNum}}⼈</td>
<td>已收到{{job.postInterviewNum}}/{{job.postDemandNum}} 份简历</td>
<td>{{job.postMaxPrice}}⼈才币</td>
</tr>
</table>
官⽅组件应⽤代码⽰下：
<el-table :data="jobs" stripe max-height="500">
<el-table-column fixed="left" label="发布⽇期" width="120">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span >{{ w.updateDate | dateDiff}}</span>
</template>
</el-table-column>
<el-table-column label="职位名称" width="120">
<template slot-scope="scope">
<span @click="lookJobDetailFun(scope.$index, jobs)">{{ w.postName }}</span> </template>
</el-table-column>
<el-table-column label="职位分类" width="120">
<template slot-scope="scope">
<span >{{ w.postType }}</span>
</template>
</el-table-column>
<el-table-column label="薪资待遇" width="120">
<template slot-scope="scope">
<span >{{ w.postMinSalary}}~{{ w.postMaxSalary}}K</span>
</template>
</el-table-column>
<el-table-column label="⼯作地点" width="150">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>⼯作地点：{{ w.postArea }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ w.postArea | areaDiff}}</el-tag>
</div>
</el-popover>
<!-- <span >{{ w.postArea | areaDiff}}</span> -->
</template>
</el-table-column>
<el-table-column label="⼯作经验" width="100">
<template slot-scope="scope">
<span >{{w.postMinExp}}~{{w.postMaxExp}}年</span>
</template>
</el-table-column>
<el-table-column label="可⾯试时间" width="150">
<template slot-scope="scope">
<span >{{arks}}</span>
</template>
</el-table-column>
<el-table-column label="需要⼈数" width="100">
<template slot-scope="scope">
<span >{{w.postDemandNum}}⼈</span>
</template>
</el-table-column>
<el-table-column label="已收简历数" width="150">
<template slot-scope="scope">
<span >已收到{{w.postInterviewNum}}/{{w.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>招聘⼈数: {{w.postDemandNum}}⼈</p>
<p>佣⾦: {{ w.postMaxPrice}}⼈才币</p>
<div slot="reference" class="name-wrapper">vue element admin
<el-tag size="medium">{{ w.postMaxPrice }}</el-tag>
</div>
</el-popover> -->
<span >{{ w.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.pTy pe.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>{{arks}}</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: [], // 学历
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论