vue带搜索条件跳转页面

最新推荐文章于 2024-07-11 15:03:42 发布

原创最新推荐文章于 2024-07-11 15:03:42 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

这篇博客探讨了如何在前端表格中显示时间戳，并通过点击单元格实现时间戳解析后的页面跳转。利用`el-table-column`组件结合自定义模板，展示了将创建时间戳格式化为友好的日期时间字符串。点击日期链接会触发`jump`函数，将用户ID和创建时间作为查询参数，通过Vue Router进行页面导航。在目标页面，查询参数被用来填充表单的查询条件。

<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
    <a style="color: #00afff" @click="jump(scope.row.userId,parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}'))">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</a>
</template>
</el-table-column>


jump(userId,createTime){
  this.$router.push({path: '/member/aaxxxurl',query: { userId: userId, createTime: createTime,}})
},

跳转页:

<el-form :model="queryParams"

data() {
  return {
    // 查询参数
    userId: null,

createTime: null

created() {
var userId = this.$route.query.userId;
var createTime = this.$route.query.createTime;
if(userId != null) {
  this.queryParams.userId = userId
}
if(createTime != null) {
  this.queryParams.createTime = createTime
}