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

涉及到单个查询，联合查询，分页等功能。出一个接口，后面坠不同参数，只需要监听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();
  },

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

 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;
    },

3. 数据请求

 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") : "啥也没有";
    },