el-table 静态查询 filter方法

 查询


                
                  
                  
                  
                
              

表格

 
                
                
              
                
                
...

筛选步骤,只根据状态来筛选

data() {
        return {
            // 表单搜索数据
            formData: {
                pageSize: 100,
                pageNum: 1,
                entrustCode:"",
                detectedDeptName:"",
                projectName:"",
              status: "",
            },
            //   表格数据
            tableData: [],
            total: 1, //表格数据总数
            pageSizes: [100, 200, 300],
            checkData:[],//选中数据
        };
    },
filters: {
    filterData: function (data) {
//解构参数
      const { status } = this.formData;
      let filteredData = [...data];
      if (status) {
        filteredData = filteredData.filter(item => item.status.includes(status));
      }
      return filteredData;
    },
  },
// 避免出现没有绑定到Vue实例本身
 mounted() {
      this.$options.filters.filterData = this.$options.filters.filterData.bind(this);
    },

注意:在组件的 mounted 生命周期钩子函数中,使用 bind 方法把 this.$options.filters.filterData 函数绑定到 Vue 实例上,确保该函数中的 this 指向 Vue 实例本身,否则将获取不到

el-table 静态查询 filter方法_第1张图片

 

你可能感兴趣的:(vue,elementui,vue.js,前端,javascript,elementui)