四十五、vue中计算属性computed的使用

computed的使用

computed可定义一些函数，这些函数叫做【计算属性】
只要data里面的数据发生变化computed会同步改变
引用【计算属性】时不要加 () ，应当普通属性使用
例：console.log(this.computedName)

项目中computed可用于tab列表数据做筛选

例如：

上代码：

<script>
    data() {
      return {
      };
    },
    created() {
    this.getList();
    },
    computed: {
    // 动态改变列表请求参数（下拉框，搜索框，包括日期选择器的请求参数全都可以整合到这里面交由计算属性处理）
    searchData() {
      return {
        pageNum: this.pageNum,//页数
        pageSize: this.pageSize,//每页显示的数量
        fileType: this.fileType === "" ? null : this.fileType,//文件类型（下拉框筛选的条件）
        fileName: this.fileName === "" ? null : this.fileName,//搜索内容（搜索框填入的内容）
      };
    },
  },
    methods: {
        // 获取列表数据
    getList() {
      this.loading = true;
      documentAPI
        .getManualGuideList(this.searchData)//this.searchData就是我们做筛选时需要传的参数，因为搜索框和下拉框的过滤条件全都被整合到this.searchData里面了，包括分页也同样适用，这样我们就不需要对搜索框和下拉框的传入参数分别做判断了
        .then((res) => {
          if (res.result === 0) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.loading = false;
          } else {
            this.$message.warning(res.error_msg);
          }
        })
        .catch((err) => {
          this.$message.warning(err.error_msg);
        });
    },
      // 筛选处理类型（下拉框和搜索框共同一个方法，因为他们唯一不同的就是传的参数不同，而传参我们都整合到this.searchData，交由计算属性处理了）
      searchChange() {
        this.pageNum = 1;
        this.getList();
      },
          // 换页
      pageChange(val) {
        this.pageNum = val;
        this.getList();
      },
    },
  
</script>

说明：
计算属性computed是一个对象，它要写在跟data,methods,created同级的地方，上面代码中我在computed里面定义了一个searchData属性，这个属性就是整合了下拉框，搜索框的请求参数。下拉框，搜索框，包括日期选择器的请求参数全都可以整合到这里面交由计算属性处理，这样我只需将searchData传给获取列表的接口中去，后面不管是下拉框，搜索框还是分页的方法中我都只执行一下获取列表的方法就好了，这样功能就实现了。这样要比我们对下拉框，搜索框，分页的方法一一去传参做判断方便太多了

实现功能展示：