el-table 静态查询 filter方法

 查询

<el-form-item label="状态：">
                <el-select v-model="formData.status" placeholder="请选择状态" @change="handleQuery"
                           @clear="handleQuery" clearable>
                  <el-option label="全部" value=""></el-option>
                  <el-option label="未完成" value="未完成"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                </el-select>
              </el-form-item>

表格

 <el-table :data="tableData | filterData "  style="width: 100%" @selection-change="handleSelectionChange" height="560px">
                <el-table-column type="selection" label="序号" align="center" >
                </el-table-column>
              <el-table-column label="状态" prop="status" align="center"></el-table-column>
                <el-table-column prop="entrustCode" label="委托编号" align="center" show-overflow-tooltip>
                </el-table-column>
...
</el-table>

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

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 实例本身，否则将获取不到