vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢(xún)參數(shù)的示例代碼

更新時(shí)間：2024年03月04日 12:08:25 作者：D.U.S.Tべ

這篇文章主要介紹了vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢(xún)參數(shù)的示例代碼,本文通過(guò)圖文示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

先直觀一點(diǎn)，上圖

列表共5條數(shù)據(jù)，準(zhǔn)備輸入Author過(guò)濾條件進(jìn)行查詢(xún)

進(jìn)入查看詳情頁(yè)，就隨便搞了個(gè)按鈕啥都沒(méi)調(diào)啦

點(diǎn)擊返回后

一開(kāi)始準(zhǔn)備用vuex做這個(gè)功能，后來(lái)放棄了，想到直接用路由去做可能也不錯(cuò)。有時(shí)間再整一套vuex版的

<!--
 * @Author: chenhaoran
 * @Date: 2024-03-03 13:44:10
 * @LastEditors: chenhaoran
 * @LastEditTime: 2024-03-03 23:07:02
-->
<template>
  <div class="app-container">
    <div class="search-area">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="Author">
          <el-input v-model="queryParams.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="Status">
          <el-select v-model="queryParams.status" placeholder="狀態(tài)">
            <el-option label="發(fā)布" value="published"></el-option>
            <el-option label="刪除" value="deleted"></el-option>
            <el-option label="草稿" value="draft"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查詢(xún)</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">{{ scope.$index }}</template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.pageviews }}</template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="doView(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getList } from '@/api/table'
// import { createNamespacedHelpers } from 'vuex'
// const { mapMutations, mapActions } = createNamespacedHelpers('queryParams')
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  beforeRouteEnter(to, from, next) {
    // console.log('beforeRouteEnter:', from);
      /**
       * 官方文檔是這樣寫(xiě)明的：
       * -- start --
       * beforeRouteEnter 守衛(wèi)不能訪(fǎng)問(wèn)this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用，因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。
       * 不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next 來(lái)訪(fǎng)問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)
       * beforeRouteEnter (to, from, next) {
          next(vm => {
            // 通過(guò) `vm` 訪(fǎng)問(wèn)組件實(shí)例
          })
        }
      * -- end --
      * 重點(diǎn)是第二句話(huà),說(shuō)明是有方法給組件實(shí)例修改值的
      */
      /** 有問(wèn)題的寫(xiě)法
       * const data = { testMsg: '測(cè)試信息'}
       * const saveData = data
       * next(vm => {
       * 在這里卡了很久，這樣寫(xiě)的話(huà)，組件created抑或mounted里，可以訪(fǎng)問(wèn)data的屬性，但卻拿不到beforeRouteEnter中定義的屬性
       *  //vm.saveData = saveData
       *  //vm.$set(vm, 'saveData', saveData)
       * 
       * })
       * 
       * 執(zhí)行順序：
       * beforeRouteEnter
       * beforeCreate
       * mounted
       * vm
       */
// 有效處理
    let obj = {}
    if (from.name == 'itemDetail') {
      obj = from.params
    } else {
      obj = {}
    }
    next(vm => {
      /**
       * 在這里卡了很久后，嘗試將設(shè)置value寫(xiě)入methods方法中使用vm來(lái)調(diào)用，
       * mounted拿不到beforeRouteEnter這里定義的變量，但是它可以訪(fǎng)問(wèn)vm實(shí)例的變量和方法
       * 再將beforeRouteEnter這定義的對(duì)象作為函數(shù)參數(shù)
       */ 
      vm.setFilterParams(obj)
    })
  },
  data() {
    return {
      list: null,
      listLoading: false,
      queryParams: {
        author: '',
        status: ''
      },
    }
  },
  created(){
    this.fetchData()
  },
  mounted() {
    // if (
    //   Object.keys(this.$store.state.queryParams.filterParams).length === 0
    // ) {
    //   this.queryParams = {
    //     // pageNum: 1,
    //     // pageSize: 10,
    //     author: '',
    //     status: ''
    //   };
    // } else {
    //   this.queryParams = JSON.parse(
    //     JSON.stringify(this.$store.state.queryParams.filterParams)
    //   );
    // }
  },
  methods: {
    // ...mapActions(["filterCache"]),
    setFilterParams(obj) {
      this.queryParams = Object.assign({},obj)
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      let queryParams = this.queryParams
      getList(queryParams).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    // 查看
    doView(row) {
      this.$router.push({
        /* path與params不可同時(shí)出現(xiàn) */
        // path: 'table/itemDetail',
        name: 'itemDetail',
        params: this.queryParams
      })
    },
    // 查詢(xún)
    onSubmit() {
      // this.$store.dispatch("queryParams/filterCache", this.queryParams);
      // this.filterCache(this.queryParams)
      this.fetchData()
    },
    reset() {
      this.queryParams = {}
      this.fetchData()
    }
  }
}
</script>

上面重點(diǎn)部分就是beforeRouteEnter了：

beforeRouteEnter(to, from, next) {
    // console.log('beforeRouteEnter:', from);
      /**
       * 官方文檔是這樣寫(xiě)明的：
       * -- start --
       * beforeRouteEnter 守衛(wèi)不能訪(fǎng)問(wèn)this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用，因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。
       * 不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next 來(lái)訪(fǎng)問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)
       * beforeRouteEnter (to, from, next) {
          next(vm => {
            // 通過(guò) `vm` 訪(fǎng)問(wèn)組件實(shí)例
          })
        }
      * -- end --
      * 重點(diǎn)是第二句話(huà),說(shuō)明是有方法給組件實(shí)例修改值的
      */
      /** 有問(wèn)題的寫(xiě)法
       * const data = { testMsg: '測(cè)試信息'}
       * const saveData = data
       * next(vm => {
       * 在這里卡了很久，這樣寫(xiě)的話(huà)，組件created抑或mounted里，可以訪(fǎng)問(wèn)data的屬性，但卻拿不到beforeRouteEnter中定義的屬性
       *  //vm.saveData = saveData
       *  //vm.$set(vm, 'saveData', saveData)
       * 
       * })
       * 
       * 執(zhí)行順序：
       * beforeRouteEnter
       * beforeCreate
       * mounted
       * vm
       */
// 有效處理
    let obj = {}
    if (from.name == 'itemDetail') {
      obj = from.params
    } else {
      obj = {}
    }
    next(vm => {
      /**
       * 在這里卡了很久后，嘗試將設(shè)置value寫(xiě)入methods方法中使用vm來(lái)調(diào)用，
       * mounted拿不到beforeRouteEnter這里定義的變量，但是它可以訪(fǎng)問(wèn)vm實(shí)例的變量和方法
       * 再將beforeRouteEnter這定義的對(duì)象作為函數(shù)參數(shù)
       */ 
      vm.setFilterParams(obj)
    })
  },

<!--
 * @Author: chenhaoran
 * @Date: 2024-03-03 14:59:08
 * @LastEditors: chenhaoran
 * @LastEditTime: 2024-03-03 22:31:39
-->
<template>
  <div class="item-detail">
    <el-button @click="handleClick">返回</el-button>
  </div>
</template>
<script>
export default {
  name: 'itemDetail',
  data() {
    return {
    }
  },
  created() {
    // console.log(this.$route);
  },
  methods: {
    handleClick() {
    /**
       * go(-1): 原頁(yè)面表單中的內(nèi)容會(huì)丟失；
       * this.$router.go(-1)：后退+刷新；
       * this.$router.go(0)：刷新；
       * this.$router.go(1) ：前進(jìn)
       * 
       * back(): 原頁(yè)表表單中的內(nèi)容會(huì)保留；在返回界面?zhèn)鬟f參數(shù)；
       * this.$router.back():后退 ；
       * this.$router.back(0) 刷新；
       * this.$router.back(1)：前進(jìn)
       * 
       */
      this.$router.back()
    }
  },
  watch: {
  }
}
</script>
<style>
</style>

到此這篇關(guān)于vue2 element 實(shí)現(xiàn)表格點(diǎn)擊詳情，返回時(shí)保留查詢(xún)參數(shù)的文章就介紹到這了,更多相關(guān)vue2 element 表格點(diǎn)擊詳情內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: