vue element 搜索，分页，优化，其他一些技巧

忘是亡心i 2021-09-03 09:22 424阅读 0赞

# 涉及到单个查询，联合查询，分页等功能。出一个接口，后面坠不同参数，只需要监听url参数的变化，或者本身传递的参数。将url参数的变化，作为查询的条件。 #

出发点：

1.  通过beforeRouteUpdate，对路由变化进行监控

beforeRouteUpdate(to, from, next) { 
           // 如果路径一样，说明才是进行搜索，或者分页的数据
        if (to.path === from.path) { 
           // 对参数对象，进行拷贝
          const newQuery = Object.assign({ }, to.query);
          const oldQuery = Object.assign({ }, from.query);
          // 如果参数不一样，说明是新的查询条件，请求接口
          if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) { 
            console.log("路由发生变化");
            this.getList();
          }
        }
        // 不管怎样，都要next放行
        next();
      },

1.  对用户输入地址栏的参数，或者刷新做记录

created() { 
        this.parseQuery();
      },
      
      // 把参数封装成方法，高级！！！
       parseQuery() { 
          // 收集查询条件
          // 根据路由的条件
          const query = Object.assign({ }, this.$route.query);
          // 现有的条件
          let listQuery = { 
            page: 1,
            pageSize: 20,
            sort: "-id",
          };
          console.log("this.$route.query", query);
    
          if (query) { 
            query.page && (query.page = Number(query.page));
            query.pageSize && (query.pageSize = Number(query.pageSize));
            // 最终是现有的条件覆盖路由的条件
            listQuery = { 
              ...listQuery,
              ...query,
            };
          }
          this.listQuery = listQuery;
        },

1.  数据请求

getList() { 
          this.listLoading = true;
          listBook(this.listQuery).then((response) => { 
            const {  data, total } = response;
            this.list = data;
            this.total = total;
            this.listLoading = false;
            console.log("list", this.list);
            this.list.forEach((book) => { 
              book.titleWrapper = this.wrapperKeyword("title", book.title);
              book.authorWrapper = this.wrapperKeyword("author", book.author);
            });
          });
        },

# 对slot-scope 编写的优化 #

一般就是这样写，但是有点麻烦

<template slot-scope="scope">
              <span>{ {  scope.row.filePath }}</span>
            </template>

解构一下

<template slot-scope="{row: { filePath }}">
              <span>{ {  filePath }}</span>
     </template>

再插槽里，使用过滤器

filters: { 
        valueFilter(value) { 
          return value ? value : "无";
        },
        timeFilter(time) { 
          return time ?  moment(time).format("YYYY-MM-DD HH:mm:ss") : "无";
        },
      },

对时间的格式化,方便起见，使用moment

npm install moment --save
    引入
    import moment from "moment";
    使用
     timeFilter(time) { 
          return time ?  moment(time).format("YYYY-MM-DD HH:mm:ss") : "无";
        },

特别注意，在element的表格中，如果是嵌套数据， 用以上方法不可行。需要将字段单独提取出来。  
\[  
time:\[  
timeInner: ‘2012010201212’  
\]  
\]

<el-table-column prop="update_time" label="更新时间" :formatter="formatDate"/>
    
    formatDate: (row, column) => { 
          var date = row.reviewTime;
          return date ? moment(date).format("YYYY-MM-DD HH:mm:ss") : "啥也没有";
        },