封装JS方法——多条件查询、批量操作

多条件查询

filter(condition, data) {
      return data.filter((item) => {
        return Object.keys(condition).every((key) => {
          return String(item[key])
            .toLowerCase()
            .includes(String(condition[key]).trim().toLowerCase());
        });
      });
    },

调用时：

search(){
	this.filter(this.keyWord, this.tableData)

以上代码中，使用了以下的api：

• filter()：数组的过滤器方法
• Object.keys()：es6提供的方法，用来获取对象键值对的键的集合
• every()：数组的every方法，因为检查数组内的所有元素是否都满足 某一条件，如果都满足返回true,.如果有一项元素不满足就返回false。
• includes():es7中提供的新方法，用于检测某字符串中是否包含给定的值，如果有返回true，没有返回false,数组中也有该方法。

批量删除

batchDel(mulData,tableData) {
      let flags = [];// 存放的是所有选中行的标志字符
      let flagList = []; // 存放的是渲染表格数据的标志字符。例如table的显示数据
      mulData.forEach((value) => { // 循环遍历得到所有的标志字符列表
        flags.push(value.id);
      });
      tableData.forEach((value) => { // 循环遍历得到选中行的标志字符列表
        flagList.push(value.id);
      });
      this.$confirm("此操作将删除数据,", "是否继续?", "提示", {
        confirmButtonText: "确定",
        confirmButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          flags.forEach((value) => { // 得到相应的下标
            let flag = flagList.indexOf(value);
            tableData.splice(flag, 1);
          });
          this.$refs.multipleTable.clearSelection(); // 将表格选中状态换为为选中
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {});
    },

调用时

this.batchDel(this.multipleTable,this.tableData);