高级搜索组件

记录自己创建的一个高级搜索组件demo。

<template>
  <div class="flex-row search-out">
    <el-form
      :inline="true"
      :model="searchForm"
      class="search-content"
      :class="{'open': open}"
      :label-width="`${config.labelWidth}px`"
      ref="searchContent"
    >
      <el-form-item
        :label="optionItem.label"
        v-for="optionItem in options"
        :key="optionItem.prop"
      >
        <!-- 输入框 -->
        <el-input
          v-if="optionItem.type==='input'||!optionItem.type"
          v-model="searchForm[optionItem.prop]"
          :placeholder="optionItem.placeholder"
          :clearable="config.clearable||optionItem.clearable"
        />
        <!-- 下拉框 -->
        <el-select
          v-if="optionItem.type==='select'"
          v-model="searchForm[optionItem.prop]"
          :placeholder="optionItem.placeholder"
          :clearable="config.clearable||optionItem.clearable"
          :multiple="optionItem.multiple"
          :collapse-tags="optionItem.collapse"
        >
          <el-option
            v-for="selectItem in optionItem.select"
            :label="selectItem.label"
            :value="selectItem.value"
            :key="selectItem.value"
          />
        </el-select>
        <!-- 时间选择 -->
        <el-date-picker
          v-if="optionItem.type==='daterange'"
          v-model="searchForm[optionItem.prop]"
          type="daterange"
          :range-separator="optionItem.separator||'至'"
          :start-placeholder="optionItem.placeholder&&optionItem.placeholder[0]?optionItem.placeholder[0]:'开始日期'"
          :end-placeholder="optionItem.placeholder&&optionItem.placeholder[1]?optionItem.placeholder[1]:'结束日期'"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <!-- radio的情况 -->
        <el-radio-group
          v-if="optionItem.type==='radio'"
          v-model="searchForm[optionItem.prop]"
        >
          <el-radio-button
            v-for="selectItem in optionItem.select"
            :key="selectItem.value"
            :label="selectItem.value"
          >{{selectItem.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="search-btn-box">
      <el-button @click="resetForm">重置</el-button>
      <el-button
        type="primary"
        @click="onSubmit"
      >查询</el-button>
      <el-button
        type="text"
        @click="toggleCollapse"
      >{{open?"收起":"展开"}}</el-button>
    </div>
  </div>
</template>

<script>
const getElTrueHeight = el => {
  const cloneNode = el.cloneNode(true)
  cloneNode.style.display = "block";
  cloneNode.style.transform = "translateY(-1000000px)";
  cloneNode.style.width = `${el.clientWidth}px`;
  cloneNode.style.height = "initial";
  document.body.appendChild(cloneNode)
  const tarWidth = cloneNode.clientWidth
  const tarHeight = cloneNode.clientHeight
  document.body.removeChild(cloneNode)
  return {
    tarWidth,
    tarHeight
  }
}

export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default: () => {
        return {
          labelWidth: 80,
          clearable: false
        }
      }
    }
  },
  data () {
    return {
      searchForm: {},
      open: false,
      animateStyle: "",
    }
  },
  methods: {
    onSubmit () {
      console.log(this.searchForm);
    },
    resetForm () {

    },
    toggleCollapse () {
      this.open = !this.open
    },
    init () {
      console.log(this.options);
      for (let i = 0; i < this.options.length; i++) {
        const itemI = this.options[i]
        if (itemI.defaultValue) {
          this.$set(this.searchForm, itemI.prop, itemI.defaultValue)
        } else if (itemI.type === "daterange" || itemI.type === "select") {
          this.$set(this.searchForm, itemI.prop, [])
        } else {
          this.$set(this.searchForm, itemI.prop, "")
        }
      }
      console.log(this.searchForm);
    }
  },
  mounted () {
    const searchContentHeight = getElTrueHeight(this.$refs.searchContent.$el).tarHeight;
    const animateStyle = document.createElement('style');
    animateStyle.type = 'text/css';
    animateStyle.innerHTML = `.search-content.open{height: ${searchContentHeight}px;}`;
    this.animateStyle = animateStyle
    document.getElementsByTagName('head').item(0).appendChild(animateStyle);
  },
  beforeDestroy () {
    document.getElementsByTagName('head').item(0).removeChild(this.animateStyle);
  },
  created () {
    this.init();
  }
}
</script>
<style lang="scss" scoped>
.search-content {
  flex-grow: 1;
  height: 62px;
  overflow: hidden;
  transition: height ease-in-out 0.5s;
  &::v-deep .el-date-editor .el-range-separator {
    width: 30px;
  }
}
.search-btn-box {
  flex-shrink: 0;
}
</style>

以上是高级筛选组件代码

引入祖册组件，然后在 标签中使用

<advanceSearch :options="options" />

option参数示例如下

options: [
        {
          type: "input", // 类型
          label: "部门",
          prop: "part",
        },
        {
          type: "select",
          multiple: true,
          collapse: true,
          label: "区域",
          prop: "region",
          select: [
            {
              label: "选项1",
              value: "1"
            },
            {
              label: "选项2",
              value: "2"
            }
          ]
        },
        {
          type: "daterange", // 类型
          label: "创建时间",
          prop: "createTime",
          defaultValue: ["2022-06-13", "2022-06-14"]
        },
        {
          type: "radio", // 类型
          label: "品牌",
          prop: "brand",
          defaultValue: "2",
          select: [
            {
              label: "选项1",
              value: "1"
            },
            {
              label: "选项2",
              value: "2"
            }
          ],
        }
      ],

效果图