vue+element 实现动态多条件搜索查询

<template>
  <div class="k-search-sub">
    <el-form :inline="true" :model="seachData" class="demo-form-inline">
      <!-- Input 输入框 -->
      <el-form-item :label="item.title" v-for="(item, index) in inputs" :key="item.model+''+index">
        <el-input
          :style="{width:item.width+'px'}"
          v-model.trim="seachData.input[item.model]"
          :placeholder="item.placeholder?item.placeholder:''"
          @input="seachData.input[item.model]=$limit200and400(200,seachData.input[item.model])"
        ></el-input>
      </el-form-item>

      <!--  select  选择框 -->
      <el-form-item :label="item.title" v-for="(item, index) in selects" :key="item.model+''+index">
        <slot v-if="item.slot" :name="item.slot"></slot>
        <el-select
          v-else
          :style="{width:item.width+'px'}"
          :disabled="item.disabled"
          :filterable="item.filterable"
          :clearable="typeof(item.clearable) == 'undefined'?true:item.clearable"
          v-model.trim="seachData.select[item.model]"
          :placeholder="item.placeholder?item.placeholder:''"
          @change="item.change?item.change($event):undefined"
          @clear="item.clear?item.clear():undefined"
        >
          <el-option
            v-for="(option, index) in item.options"
            :key="option.label+''+index"
            :label="option.label"
            :value="option.value"
            :disabled="option.disabled"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- dateTime  起始时间选择器 -->
      <el-form-item :label="date.label" v-if="date.label">
        <el-date-picker
          v-model="seachData.date[date.model]"
          :type="date.type?date.type:'daterange'"
          :value-format="date.format?date.format:'yyyy-MM-dd'"
          range-separator="至"
          start-placeholder=" "
          end-placeholder="  "
          :style="{width:date.width+'px'}"
        ></el-date-picker>
      </el-form-item>

      <!-- button  查询 && 重置 -->
      <el-form-item>
        <el-button
          :type="button.type?button.type:'primary'"
          :plain="button.plain"
          :round="button.round"
          :circle="button.circle"
          :disabled="button.disabled"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
        <el-button @click="onReset" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  props: {
    inputs: {
      default: () => {
        return new Array();
      },
    },
    selects: {
      default: () => {
        return new Array();
      },
    },
    button: {
      default: () => {
        return new Object();
      },
    },
    date: {
      default: () => {
        return new Object();
      },
    },
  },
  data() {
    return {
      seachData: {
        input: {},
        select: {},
        date: {},
      },
    };
  },
  mounted() {
    this.clearData();
  },
  methods: {
    changeInput(key, value) {
    },
    /**
     * 查询
     */
    search() {
      let searchObj = {};
      if (this.inputs.length != 0) {
        this.inputs.map((el) => {
          searchObj[el.model] = this.seachData.input[el.model] || "";
        });
      }
      if (this.selects.length != 0) {
        this.selects.map((el) => {
          searchObj[el.model] = this.seachData.select[el.model] || "";
        });
      }
      if (this.date.label) {
        searchObj[this.date.model] = this.seachData.date[this.date.model] || [];
      }
      this.$emit("search", searchObj);
    },
    /**
     * 重置
     */
    onReset() {
      let searchObj = {};
      if (this.inputs.length != 0) {
        this.inputs.map((el) => {
          searchObj[el.model] = "";
          this.$set(this.seachData.input, el.model, "");
        });
      }
      if (this.selects.length != 0) {
        this.selects.map((el) => {
          searchObj[el.model] = "";
          this.$set(this.seachData.select, el.model, "");
        });
      }
      if (this.date.label) {
        searchObj[this.date.model] = [];
        this.$set(this.seachData.date, el.model, []);
      }
      this.$emit("onReset", searchObj);
    },
    clearData() {
      if (this.inputs.length != 0) {
        this.inputs.map((el) => {
          this.$set(this.seachData.input, el.model, "");
        });
      }
      if (this.selects.length != 0) {
        this.selects.map((el) => {
          this.$set(this.seachData.select, el.model, "");
        });
      }
      if (this.date.label) {
        this.$set(this.seachData.date, el.model, []);
      }
    },
  },
};
</script>
<style scoped lang="scss">
// 搜索框 头部 
.k-search-sub{
  // padding: 10px 0 20px 0;
  margin-top: 10px;
    .el-form{
      .el-form-item{
        height: 30px;
        line-height: 30px;
        .el-form-item__label{
        height: 30px;
        line-height: 30px;
        }
        .el-input__inner{
          width: 150px;
        }
        .el-range-editor{
          width: 304px;
          .el-range-separator{
            width: 6%;
            padding: 0px 2px;
          }
        }
        .el-form-item__content{
          height: 30px;
          line-height: 30px;
          .el-date-editor {
            display: inline-block !important; 
            vertical-align: middle; 
            line-height: 24px; 
            .el-range__icon{
              line-height: 22px;
            }
            .el-range-separator{
              line-height: 22px;

            }
          }
          .el-select{
            // height: 30px;
            // line-height: 30px;
           
          }
        }
      }
      .right_btn{
        float: right;
        margin-right: 0px;
        // margin-top: 5px;
      }
    }
}

</style>

该组件主要实现 多条件查询   通过传参进行动态生成

    <!-- 搜索框 -->
    <search-bar :inputs="inputs" :selects="selects" @search="search" @onReset="onReset">
      <el-select v-model.trim="searchObj.appTypeId" @change="toSecondClass" slot="appTypeId">
        <el-option
          v-for="(item, index) in optionsType"
          :key="item.enumCode + index"
          :label="item.enumName"
          :value="item.enumCode"
        />
      </el-select>

      <el-select v-model.trim="searchObj.appClassId" slot="appClassId">
        <el-option
          v-for="(item, index) in appClassList"
          :key="item.valueCode + index"
          :label="item.valueName"
          :value="item.valueCode"
        />
      </el-select>
    </search-bar>

 

 

<template>
  <div class="content">
    <!-- 搜索框 -->
    <search-bar :inputs="inputs" :selects="selects" @search="search" @onReset="onReset" />

    <!-- 表格 -->
    <div class="ktable">
      <k-table
        :tableData="tableData"
        :searchObj="searchObj"
        :columns="columns"
        :operationObj="operationObj"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @queryDetail="handleRouterDetail"
      >
       <el-table-column label="设备分类" slot="deviceClass">
        <template slot-scope="scope">
          <div>{{scope.row.deviceClass}}</div>
        </template>
      </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" slot="createdAt">
          <template slot-scope="scope">
            <span>{{ moment(scope.row.createdAt).format("YYYY-MM-DD HH:mm")}}</span>
          </template>
        </el-table-column>
      </k-table>
    </div>

    <!-- 自定义模型=> 查看详情 -->
    <el-dialog
      custom-class="maxHeightDialog"
        class="oflow"
      title="详情"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <pre v-html="jsonData"></pre>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from "@/components/SearchBar";
import KTable from "@/components/KTable/index";
import formatJson from "@/utils/formatJson.js";
import { queryBaseOrganizeList, getModelProvinceList } from "@/api/appManage";

export default {
  name: "ElementTest",
  components: {
    SearchBar,
    KTable
  },
  data() {
    return {
      inputs: [
        { title: "模型编码", model: "model", width: "" },
        { title: "设备名称", model: "productName", width: "" }
      ],
      selects: [
        {
          title: "组织名称",
          model: "bcId",
          change: val => {},
          options: []
        }
      ],
      //   date: { label: "起止时间", type: "daterange", model: "datetime" },
      tableData: [{}],
      searchObj: {
        model: "",
        productName: "",
        bcId: "",
        currentPage: 1,
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        { prop: "deviceType", label: "类型名称", width: "", hasSort: false },
        { slot: "deviceClass",   },
        { prop: "model", label: "模型编码", width: "", hasSort: false },
        { prop: "protocolType", label: "协议", width: "", hasSort: false },
        { prop: "bcName", label: "组织名称", width: "", hasSort: false },
        { prop: "jsonDetail", label: "模型信息", width: "", hasSort: false },
        { slot: "createdAt" }
      ],
      jsonData: "",
      operationObj: {
        queryDetailName: "查看详情"
      },
      dialogVisible: false
    };
  },
  mounted() {
    this.getType();
    this.initData();
  },
  methods: {
    initData() {
      getModelProvinceList(this.searchObj).then(res => {
        if (res) {
          this.tableData = res.list;
          this.searchObj.total = res.total;
        }
      });
    },
    search(val) {
     
      this.searchObj = Object.assign(this.searchObj, val);
      this.initData();
    },
    getType() {
      this.selects[0].options = [];
      queryBaseOrganizeList().then(res => {
        if (res.data) {
          res.data.map(el => {
            let obj = {
              label: el.bcName,
              value: el.bcId
            };
            this.selects[0].options.push(obj);
          });
          this.selects[0].options.unshift({ value: "", label: "全部" });
        }
      });
    },
    onReset(val) {
      this.searchObj = {
        model: "",
        productName: "",
        bcId: "",
        currentPage: 1,
        pageNum: 1,
        pageSize: 10,
        total: 0
      };

      this.initData();
    },
    // 分页
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.initData();
    },
    // 分页
    handleCurrentChange(val) {
      this.searchObj.pageNum = val;
      this.searchObj.currentPage = val;
      this.initData();
    },
    // 查看详情
    handleRouterDetail(row) {
      let showJson = JSON.parse(JSON.stringify(row));
      showJson.jsonDetail = JSON.parse(showJson.jsonDetail);
      this.jsonData = formatJson(showJson);
      this.dialogVisible = true;
    }
  }
};
</script>
<style  lang="scss"  scoped>
.content {
  box-sizing: border-box;
  height: 100%;
  position: relative;
  font-size: 14px;
  line-height: 28px;
  padding: 10px 20px;
  margin-bottom: 10px;
}
</style>