element-ui（查询封装）

1.在components目录下建个文件夹封装查询

<template>
  <div class="table-filter">
    <el-form :inline="true">
      <template v-for="(filter, index) in filterGroup">
        <span class="filter-item" :key="index" v-show="filter.show !== false">
          <label
            class="input-label"
            v-if="filter.label"
            :class="'input-label-' + index"
            >{{ filter.label }}</label
          >
          <!-- select -->
          <template v-if="filter.type === 'select'">
            <el-select
              clearable
              @change="change"
              v-model="filter.value"
              :placeholder="filter.placeholder"
              size="small"
              filterable
            >
              <el-option
                v-for="item in filter.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="filter.type === 'date'">
            <el-date-picker
              v-model="filter.value"
              type="date"
              size="small"
              :format="filter.format || 'yyyy-MM-dd'"
              :value-format="filter.valueformat || 'yyyy-MM-dd'"
              :placeholder="filter.placeholder"
            ></el-date-picker>
          </template>

          <template v-else-if="filter.type === 'dateYear'">
            <el-date-picker
              v-model="filter.value"
              type="year"
              size="small"
              :format="filter.format || 'yyyy'"
              :value-format="filter.valueformat || 'yyyy'"
              :placeholder="filter.placeholder"
            ></el-date-picker>
          </template>

          <template v-else-if="filter.type === 'dateRange'">
            <el-date-picker
              v-model="filter.options[0].value"
              :type="filter.options[0].type || 'date'"
              size="small"
              :format="filter.options[0].format || 'yyyy-MM-dd'"
              :value-format="filter.options[0].valueformat || 'yyyy-MM-dd'"
              :placeholder="filter.options[0].placeholder"
              :picker-options="startTime(filter.options[1].value)"
            ></el-date-picker
            >&nbsp;
            <label
              class="input-label input-date-end"
              v-if="filter.centerLabel"
              >{{ filter.filterCenterLabel }}</label
            >
            &nbsp;
            <el-date-picker
              v-model="filter.options[1].value"
              :type="filter.options[1].type || 'date'"
              size="small"
              :format="filter.options[1].format || 'yyyy-MM-dd'"
              :value-format="filter.options[1].valueformat || 'yyyy-MM-dd'"
              :placeholder="filter.options[1].placeholder"
              :picker-options="endTime(filter.options[0].value)"
            ></el-date-picker>
          </template>

          <!-- <template v-else-if="filter.type === 'selectTree'">
            <el-select-tree
              size="small"
              :placeholder="filter.placeholder"
              clearable
              checkStrictly
              :multiple="
                filter.hasOwnProperty('multiple') ? filter.multiple : false
              "
              :data="filter.treeData"
              :props="filter.treeProps"
              v-model="filter.value"
              @change="filter.change ? filter.change(filter.value) : null"
            ></el-select-tree>
          </template> -->
          <!--dicSelect-->
          <!-- <template v-else-if="filter.type === 'dicSelect'">
            <dict-select
              v-model="filter.value"
              @change="change"
              :type="filter.dicType"
              :placeholder="filter.placeholder"
              filterable
              clearable
            ></dict-select>
          </template> -->

          <!-- cascader -->
          <template v-else-if="filter.type === 'cascader'">
            <el-cascader
              ref="cascader"
              clearable
              @change="change"
              v-model="filter.value"
              :options="filter.options"
              :placeholder="filter.placeholder"
              :show-all-levels="true"
              :props="{ checkStrictly: true }"
              size="small"
              filterable
            ></el-cascader>
          </template>

          <!-- input -->
          <template v-if="filter.type === 'input'">
            <el-input
              clearable
              v-model="filter.value"
              :placeholder="filter.placeholder"
              size="small"
              :disabled="filter.disabled"
            ></el-input>
          </template>
        </span>
      </template>
      <el-button type="primary" @click.stop="search()" size="small"
        >查询</el-button
      >
      <el-button
        type="danger"
        @click.stop="reset()"
        size="small"
        plain
        class="reset-btn"
        >清空</el-button
      >
      <slot name="otherBtn"></slot>
      <slot name="otherBtns"></slot>
    </el-form>
  </div>
</template>

<script>
/**
 * 表格过滤组件
 *
 * @prop filterGroup 过滤配置组，作为 model，支持三种类型数据（查看下面实例结构）
 *
 * @event change(filterGroup) 数据更新事件
 * @event search() 查询
 * @event reset() 重置
 */
export default {
  name: "HeaderSearch",
  props: {
    /**
     * 过滤配置组
     * example: [
     *   // 级联选择器 props 参考 data 中的配置
     *   { type: 'cascader', options: [{label: 'test', value: 1, children: []}], placeholder: '', value: '', props: {} },
     *
     *   // 下拉框
     *   { type: 'select', options: [{label: 'test', value: 1}], placeholder: '', value: '' },
     *
     *   // 下拉字典
     *   { type: 'dicSelect', placeholder: '', dicType: '', value: '' },
     *
     *   // 输入框
     *   { type: 'input', placeholder: '', value: '' },
     *
     *   // 时间段 默认格式 2010-10-01 默认值 时间戳
     *   { type: 'date', options: [{placeholder: '', value: '', format: 'yyyy - MM - dd', valueformat: 'timestamp'}] },
     * ]
     */
    filterGroup: Array,
    EDialogConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          maxLength: 3,
        };
      },
    },
    btnsConfig: {
      type: Object,
      default: () => {
        return {
          clearBtnText: "重置",
          showResetBtn: false,
          showExportBtn: false,
          showMoreBtn: false,
        };
      },
    },
  },
  model: {
    prop: "filterGroup",
    event: "change",
  },
  data() {
    return {
      filterGroupRow: [],
      cascaderProps: {
        children: "children",
        value: "value",
        label: "label",
        emitPath: false,
      },
      endTime: {},
      startTime: {},
    };
  },
  mounted() {
    const result = [];
    let i = 0;
    let j = 0;
    let maxLength = this.EDialogConfig.maxLength;
    result[j] = [];
    this.filterGroup.forEach((item) => {
      // debugger;
      if (item.type !== "dateRange") {
        result[j].push(item);
        i++;
      } else if (result[j].length < maxLength - 1) {
        result[j].push(item);
        i++;
        maxLength = maxLength - 1;
      } else if (result[j].length >= maxLength - 1) {
        i = 0;
        j++;
        // console.log(result[j]);
        result[j] = [];
        result[j].push(item);
      }

      if (i === maxLength) {
        i = 0;
        j++;
        result[j] = [];
        maxLength = this.EDialogConfig.maxLength;
      }
    });
    if (result[result.length - 1].length <= 0) {
      result.splice(result.length - 1, 1);
    }
    this.filterGroupRow = result;
  },
  created() {
    this.startTime = function (value) {
      return {
        disabledDate(time) {
          return time.getTime() > new Date(value).getTime();
        },
      };
    };
    this.endTime = function (value) {
      return {
        disabledDate(time) {
          return time.getTime() < new Date(value).getTime() - 86400000;
        },
      };
    };
  },
  methods: {
    change() {
      this.$emit("change", this.filterGroup);
      // this.$refs.cascader.dropDownVisible = false; //监听值发生变化就关闭它
    },
    search() {
      const params = {};
      this.filterGroup.forEach((item) => {
        if (item.key) {
          params[item.key] = item.value;
        }
        if (item.type === "dateRange") {
          item.options.forEach((dateValue) => {
            if (dateValue.key) {
              params[dateValue.key] = dateValue.value; // 时间戳:new Date(dateValue.value).getTime()
            }
          });
        }
      });
      this.$emit("search", params);
    },
    reset() {
      const params = {};
      this.filterGroup.forEach((item) => {
        if (item.type === "dateRange") {
          item.options.forEach((dateValue) => {
            dateValue.value = "";
            params[dateValue.key] = "";
          });
        } else {
          item.value = "";
          params[item.key] = "";
        }
      });
      this.$emit("reset", params);
    },
    exportExcel() {
      this.$emit("exportExcel");
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-item {
  margin-right: 8px;
}
.input-label {
  width: 80px;
  display: inline-block;
  margin-right: 10px;
  text-align: right;
  font-size: 12px;
  color: #121518;
  margin-top: 30px;
  margin-bottom: 30px;
}
::v-deep {
  .el-input,
  .el-select,
  .el-cascader {
    width: 185px !important;
  }
}
.left-panel {
  margin-top: 10px;
}
.right-panel {
  height: 100%;
}
.left-panel:first-child {
  margin-top: 0px;
}
.input-date-end {
  margin-left: 8px;
  width: auto;
}
</style>

 2.在用到查询的页面引入刚封装好查询

<template>
<div>
  <Headersearch
      @search="handleQuery"
      @reset="resetQuery"
      v-model="tableFilters"
    >
    </Headersearch>
</div>
</template>

<script>
export default {
 components: {
    Headersearch,
  },

data(){
  return {
     tableFilters: [
        {
          type: "input",
          key: "orderNum",
          value: "",
          placeholder: "请输入订单号",
          label: "订单号",
        },
        {
          type: "input",
          key: "realName",
          value: "",
          placeholder: "请输入下单人",
          label: "下单人",
        },
        {
          type: "select",
          key: "orderStatus",
          label: "订单状态",
          value: "",
          options: [
            {
              value: 1,
              label: "待支付",
            },
            {
              value: 2,
              label: "成功",
            },
            {
              value: 3,
              label: "取消",
            },
            {
              value: 4,
              label: "失败",
            },
            {
              value: 5,
              label: "临时订单",
            },
          ],
          placeholder: "请选择订单状态",
          change: (row) => this.getPersons(row),
        },
        {
          type: "input",
          key: "serviceShopName",
          value: "",
          placeholder: "请输入服务门店名称",
          label: "服务门店名称",
        },
        {
          type: "dateRange",
          label: "下单时间",
          options: [
            {
              value: "",
              placeholder: "开始时间",
              key: "startTime",
            },
            {
              value: "",
              placeholder: "结束时间",
              key: "endTime",
            },
          ],
        },
      ],

 queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
 elseParams: {},
    }

   }
methods:{
        // 调用接口
     getList() {
      this.tableLoading = true;  // 表格的Loading
      Object.assign(this.queryParams, this.elseParams); // 注意这里必须像我这样用
      listmatters(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            let current = this.queryParams.pageNum;
            let total = res.total;
            let data = res.rows;
            this.$refs.zzllks.setPageInfo(current, total, data); // 这里是把数据给表格页
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

   /** 搜索按钮操作 */
    handleQuery(params) {
      this.elseParams = params;
      this.queryParams.pageNum = 1;
      this.$refs.zzllks.setPageInit();  // 这里是前面表格的封装调用表格里面的方法
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery(params) {
      this.elseParams = params;
      this.$refs.zzllks.setPageInit(); // 这里是前面表格的封装
      this.queryParams.pageNum = 1;
      this.getList();
    },
}

}
<script>

3.以上就是对查询的封装了,想跟表格分页一起使用的封装配合我上个文章 ,有什么问题留言