vue项目：搜索--路由跳转新窗口页面，在新窗口还有搜索的操作

最新推荐文章于 2024-05-16 13:30:42 发布

_chang.

最新推荐文章于 2024-05-16 13:30:42 发布

阅读量494

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_66226018/article/details/131738722

版权

首页页面
<template>
    <el-button size="medium" icon="el-icon-search" @click="getTextList">
      搜索
    </el-button>
</template>
<script>
export default {
   data(){
    return {
        page: {//分页值，因为再路由打开的新窗口中有分页效果
            currentPage: 1,
            pageSize: 10,
        },
        queryForm: {//搜索的input框的v-model值
            title: ``,
            label: ``,
        },
        total:0,
        //这个是因为首页页面和
        // 路由打开的新窗口页面都有搜索
        // ，并且用的都是一个接口,所以给了一个开关
        isParentDataLoaded:false,
    }
   },
   methods:{
    getTextList() {
      return new Promise((resolve, reject) => {
        const params = {
          data: {
            title: this.queryForm.title,
            pageSize: this.page.pageSize,
            currentPage: this.page.currentPage,
          },
        };
        if (this.queryForm.label.length > 0) {
          params.data.label = this.queryForm.label;
        }
        newPage(params).then((data) => {
            if (data.result) {
             //this.searchResults = data.resultdata.data;这一步如果你的首页页面需
             //要渲染的话可以加上
              this.total = data.resultdata.count;
              let route = this.$router.resolve({
                path: "/newPage",
                query: {
                  searchTxt: this.queryForm.textTitle,
                  total: this.total,
                  isParentDataLoaded: this.isParentDataLoaded,
                },
              });
              window.open(route.href, "_blank");

              resolve();
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
   }
}
</script>

路由跳转新窗口页面--明文传输--在url上会展示

<template>
    <div>
       <div>
        <el-input
          placeholder="请输入搜索内容"
          size="medium"
          style="width: 300px; height: 50px; border-radius: 10px"
          v-model="queryForm.textTitle"
        />
        &nbsp;
        <el-button size="medium" type="primary" @click="search"> 搜索 </el-button>
        <el-button size="medium" @click="rest"> 重置 </el-button>
      </div>
  
      <div>
         <span v-for="(item,index) in searchData" :key="index">
             <li>{{ item.name }}</li>
         </span>
      </div>
      <div>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
        searchData: [],
        queryForm: { title: `` },
        isSearch: "", // 添加isSearch变量
        total: 0,
        queryForm: {
          title: "",
          label:"",
        },
      };
    },
    created() {
      this.helpTextSearchDialogFlag = true;
      this.init();
    },
    methods: {
      init() {
        this.isSearch = this.$route.query.isParentDataLoaded;
        this.page.totalResult = parseInt(this.$route.query.total);
        let seartitle = this.$route.query.searchTxt
        let searchLabel = this.$route.query.searchLabel;
        if(seartitle || searchLabel) {
          this.$set(this.queryForm, 'title', seartitle)
          this.$set(this.queryForm, 'label', searchLabel)
          this.$nextTick(() => {
            this.search()
          })
        }else{
          this.list();
        }
       
      },
      search() {
        this.isSearch = true;
        this.page.currentPage = 1;
        this.list();
      },
      list() {
        let title = undefined
        let label = undefined
        if(this.queryForm.title) {
          title = this.queryForm.title.trim()
        }
        if(this.queryForm.label) {
          label = this.queryForm.label.trim()
        }
        const params = {
          data: {
            pageSize: this.page.pageSize,
            currentPage: this.page.currentPage,
            title: title,
            label: label, 
          },
        };
        newPage(params).then((data) => {
            if (data.result) {
              this.searchData = data.resultdata.data;
              this.page.totalResult = data.resultdata.count;
            }
          })
          .catch((error) => {
          });
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.list();
      },
      handleCurrentChange(val) {
        his.page.currentPage = val;
        this.list();
      },
      rest() {
        this.queryForm.title = ``;
      },
    },
  };
  </script>

以上完结，这样我们就可以在主页面进行搜索，在路由跳转页面也进行搜索了