【Vue】前端实现多条件筛选表格数据

思路：将所有过滤条件包装为一个对象，先利用lodash的_.omitBy(object, [predicate=_.identity])将不做筛选的字段（此例默认值为-1）剔除，再用lodash的_.filter(collection, [predicate=_.identity])函数将该过滤条件对象作为参数来过滤原数组。（Lodash真香）

<template>
	<el-table :data="getTableData">
      ...
    </el-table>
</template>
export default {
  data() {
    return {
      filter: {
        state: "-1", // 按状态检索
        building: "-1", // 按所属楼宇检索
      },
      tableData: [
        {
          building: "4号楼",
          address: "0805室",
          name: "呵呵呵有限公司",
          state: 0,
        },
        {
          building: "2号楼",
          address: "0805室",
          name: "上海哔哩哔哩有限公司",
          state: 1,
        },
	  ]
    };
  },
  methods: {
    getTableData() {
      const filter_temp = _.omitBy(this.filter, params => params === "-1");
      // filter函数不会改变原数组，故可直接作为返回值返回
      return _.filter(this.tableData, filter_temp);
    }
  },
};
</script>