組件使用

<template>
  <div class="Test">
    <!-- 頂部按鈕 -->
    <div class="header">
      <el-button type="primary"
        size="mini"
        class="searchBtn"
        @click="search">
        高級搜索
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
    </div>
    <!-- 搜索配置 -->
    <div class="search">
      <vueSearch :formItem="searchItem"
        ref="vueSearch"
        :formHandler="form_handler"
        :formData="searchInfo"></vueSearch>
    </div>

    <!-- 列表 -->
    <div class="list">
      <div class="tab">
        <el-table ref="tableList"
          :data="table.data"
          tooltip-effect="dark"
          border
          fit
          size="mini">
          <el-table-column show-overflow-tooltip
            v-for="item in table.columns"
            :key="item[table.key]"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :fixed="item.fixed"
            :sortable="item.sortable"
            :formatter="item.formatter">
          </el-table-column>
        </el-table>
      </div>
      <div class="fenye">
        <span>共有{{table.total}}條記錄 每頁{{searchInfo.size}}條</span>
        <el-pagination @current-change="searchData"
          :current-page.sync="searchInfo.current"
          background
          @size-change="searchData"
          :page-sizes="[20,50,100]"
          :small="true"
          :page-size.sync="searchInfo.size"
          layout=" sizes,prev, pager, next, jumper"
          :total="table.total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import vueSearch from "@/components/Search/serachs";
export default {
  name: "Test",
  // 初始數(shù)據(jù)定義處
  data () {
    return {
      //搜索參數(shù)配置
      searchInfo: {
        test1: "",
        test2: false,
        test3: "",
        test4: [],
        test5: [],
        test6: [],
        test7: "",
        test8: [],
        current: 1,
        size: 20,
        orderBy: "",
        asc: false
      },
      //參數(shù)配置
      searchItem: [
        {
          type: "Input",
          label: "輸入框:",
          prop: "test1"
        },
        {
          type: "Checkbox",
          label: "選擇框",
          prop: "test2",
          hint: "",
        },
        {
          type: "Select",
          label: "下拉單選:",
          prop: "test3",
          filterable: true,
          options: [
            { value: 1, label: "選項(xiàng)1" },
            { value: 2, label: "選項(xiàng)2" },
          ]
        },
        {
          type: "Selects",
          label: "下拉多選:",
          prop: "test4",
          filterable: true,
          options: [
            { value: 1, label: "選項(xiàng)1" },
            { value: 2, label: "選項(xiàng)2" },
          ]
        },
        {
          type: "Selects_page",
          label: "下拉分頁多選:",
          prop: "test5",
          classification: "common",//接口文件
          dataCustom: "getOrderNum",
          url: "getOrderNum",//接口名
          singlechoice: false,
          search: { size: 20, current: 1, searchValue: undefined },
          displayfields: {
            id: "value",
            name: "value",
            listid: "value",
            listname: "value",
            seach: "searchValue"
          },
          title: "xxx",
          placeholder: "xxx",
          columns: [
            { prop: "value", label: "值" },
            { prop: "code", label: "編碼" },
          ]
        },
        {
          type: "Selects",
          label: "下拉多選:",
          prop: "test6",
          filterable: true,
          options: [
            { value: 1, label: "選項(xiàng)1" },
            { value: 2, label: "選項(xiàng)2" },
          ]
        },
        {
          type: "Date",
          label: "日期:",
          prop: "test7",
          dateFormate: "yyyy-MM-dd HH:mm:ss",
          timeType: "datetime"
        },
        {
          type: "Time_feame",
          label: "時(shí)間區(qū)間:",
          prop: "test8",
          dateFormate: "yyyy-MM-dd",
          timeType: "daterange"
        }
      ],
      //表單按鈕配置
      form_handler: [
        {
          label: "重置",
          key: "reset",
          handler: () => this.resetSearch()
        },
        {
          label: "搜索",
          key: "submit",
          type: "primary",
          handler: () => this.searchData(1)
        }
      ],
      // 表格
      table: {
        key: "id",
        data: [],
        columns: [,
          { prop: "test1", label: "測試1" },
          { prop: "test2", label: "測試2" },
          { prop: "test3", label: "測試3" },
        ],
        total: 0
      },
    };
  },
  // 組件注冊
  components: {
    vueSearch,
  },
  methods: {
    //重置
    resetSearch () {
      let data = this.$options.data(); //重置組件
      this.searchInfo = data.searchInfo; //重置搜索查詢信息
      this.$refs.vueSearch?.resetselectecho();
    },
    //搜索
    searchData (val) {
      val == 1 ? (this.searchInfo.current = 1) : "";
      api.bicycleOrder.listInfo(this.searchInfo).then(res => {
        this.table.data = res.data ? res.data.records : [];
        this.table.total = res.data ? res.data.total : 0;
      });
    },
  }
};
</script>
<style lang="less">
</style>

封裝組件：vueSearch

  <template>
  <div ref="serch"
    class="searchBox">
    <div class="left">
      <div v-for="item in formItem"
        :key="item.prop">
        <!-- input -->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type==='Input'">
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box box1">
            <el-input size="mini"
              :clearable="true"
              v-model="formData[item.prop]"
              placeholder="請輸入"
              :style="{width:item.width}"></el-input>
          </div>
        </div>
        <!-- Checkbox -->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type==='Checkbox'">
          <div class="box box1">
            <el-checkbox v-model="formData[item.prop]">{{item.label}}</el-checkbox>
          </div>
          <el-tooltip :content="item.hint"
            v-if="item.prop=='keySite'"
            placement="top">
            <span style="display: inline-block; margin-left: 10px;"
              class="iconfont icon-gantanhao"></span>
          </el-tooltip>
        </div>
        <!--select 單選-->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type==='Select'">
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box">
            <el-select v-model="formData[item.prop]"
              :filterable="item.filterable"
              :clearable="true"
              :disabled="item.disabled"
              :placeholder="item.placeholder"
              size="mini">
              <el-option v-for="select in item.options"
                :label="select.label"
                :key="select.value+select.label"
                :value="select.value"></el-option>
            </el-select>
          </div>
        </div>
        <!--select 多選-->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type==='Selects'">
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box">
            <el-select v-model="formData[item.prop]"
              :filterable="item.filterable"
              :clearable="true"
              :disabled="item.disabled"
              :placeholder="item.placeholder"
              multiple
              collapse-tags
              size="mini">
              <el-option v-for="select in item.options"
                :label="select.label"
                :key="select.value+select.label"
                :value="select.value"></el-option>
            </el-select>
          </div>
        </div>
        <!-- Date -->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type=='Date'"
          style="font-size:12px">
          <!-- <div>{{item}}</div> -->
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box">
            <el-date-picker size="mini"
              :clearable="true"
              v-model="formData[item.prop]"
              :value-format="item.dateFormate"
              :type="item.timeType"
              align="right"
              placeholder="選擇日期"></el-date-picker>
          </div>
        </div>
        <!-- 年月 -->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type=='Date_monthrange'"
          style="font-size:12px">
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box">
            <el-date-picker size="mini"
              :clearable="true"
              v-model="formData[item.prop]"
              :value-format="item.dateFormate"
              type="monthrange"
              align="right"
              range-separator="至"
              start-placeholder="開始月份"
              end-placeholder="結(jié)束月份">
            </el-date-picker>
          </div>
        </div>
        <!-- 下拉分頁 -->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type=='Selects_page'">
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box">
            <selectecho :url="item.url"
              :classification="item.classification"
              :singlechoice="item.singlechoice"
              :positionindex="0"
              :ref="item.dataCustom"
              :search="item.search"
              :displayfields="item.displayfields"
              @selectecho="getselectecho(item)"
              :title="item.title"
              :placeholder="item.placeholder"
              :columns="item.columns" />
          </div>
        </div>
        <!-- 時(shí)間段 -->
        <div class="Search-box"
          v-show="item.showFlag==false?item.showFlag:true"
          v-if="item.type=='Time_feame'"
          style="font-size:12px">
          <span class="title"
            :class="classObject(item.required)">{{item.label}}</span>
          <div class="box">
            <el-date-picker size="mini"
              :clearable="true"
              v-model="formData[item.prop]"
              :value-format="item.dateFormate"
              :type="item.timeType"
              :default-time="item.defaultTime"
              align="right"
              start-placeholder="開始"
              end-placeholder="結(jié)束"></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <el-button size="mini"
        v-for="item in formHandler"
        :key="item.key"
        :type="item.type"
        @click="item.handler && item.handler()">{{item.label}}</el-button>
    </div>
  </div>
</template>

<script>
import selectecho from "@/components/selectdiong";
export default {
  name: "Search",
  props: {
    lableWidth: {
      type: String,
      default: "120px"
    },
    //hover提示語
    hint: {
      type: String,
      default: ""
    },
    //是否顯示
    showFlag: {
      type: Boolean,
      default: true
    },
    //表單數(shù)據(jù)
    formData: {
      type: Object,
      default: () => { }
    },
    //表單配置
    formItem: {
      type: Array,
      default: () => { }
    },
    //按鈕
    formHandler: {
      type: Array,
      default: () => { }
    },
    //驗(yàn)證
    verification: {
      default () {
        return () => { };
      },
      type: Function
    }
  },
  // props: ['child1Info'],
  data () {
    return {
      selectedData: {},
      //提示信息
      type_msg: {
        Input: "請輸入",
        Radio: "請選擇",
        Checkbox: "請選擇",
        Select: "請選擇",
        Date: "請選擇"
      }
    };
  },
  // 組件注冊
  components: {
    selectecho
  },
  watch: {},

  // 在 methods 中定義方法
  methods: {
    //必填標(biāo)識
    classObject (flag) {
      return {
        mustInput: flag
      };
    },
    // 獲取組件中選取得數(shù)據(jù)
    getselectecho (item) {
      this.formData[item.prop] = this.$refs[item.dataCustom][0].selecData.map(
        el => {
          return el[item.displayfields.id];
        }
      );
      console.log(this.$refs[item.dataCustom][0].selecData);

      this.$refs[item.dataCustom][0].dataCustom = this.$refs[
        item.dataCustom
      ][0].selecData;
    },
    // 重置下拉分頁數(shù)據(jù)源
    resetselectecho () {
      this.formItem.forEach(el => {
        if (el.type == "Selects_page") {
          this.$refs[el.dataCustom][0].dataCustom = [];
        }
      });
    },
    //初始化
    initFormData () {
      const formData = {};
      this.formItem.forEach(item => {
        if (item.required) {
          this.rules(item);
        }
        //自定義驗(yàn)證規(guī)則
        if (item.validator) {
          item.rules = item.validator;
        }
      });
      this.form = formData;
    },
    // 規(guī)則
    rules (item) {
      const requiredRules = [
        {
          required: true,
          message:
            item.required_msg || `${this.type_msg[item.type]}${item.lable}`,
          trigger: "blur"
        }
      ];
      //其他規(guī)則
      if (item.rules && item.rules.length > 0) {
        item.rules = requiredRules.concat(item.rules);
      } else {
        item.rules = requiredRules;
      }
      return requiredRules;
    }
  },
  mounted () {
    // 直接傳回到最外層父組件
    this.$emit("test1", "兒子組件啊啊啊");
  },
  watch: {
    formItem: {
      handler (newValue) {
        // console.log(newValue);
        this.initFormData();
      },
      immediate: true
    }
  }
};
</script>
<style>
.searchBox {
  background-color: #f7f7f7;
  box-shadow: 0px 0px 1px #ccc;
  border-radius: 3px;
  align-items: center;
  padding: 10px 10px 20px 10px;
  width: 100%;
  min-height: 100px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  justify-content: space-between;
}
.searchBox .mustData::before {
  display: inline-block;
  content: '* ';
  color: #f56c6c;
  margin-right: 4px;
}
.searchBox .left {
  /* width: 100%; */
  /* flex: 2; */
  display: flex;
  /* height: 100%; */
  min-height: 80px;
  width: 100%;
  flex-wrap: wrap;
}
.searchBox .left .Search-box {
  display: flex;
  align-items: center;
  padding: 0 5px;
  height: 100%;
  font-size: 12px;
}
.searchBox .left .Search-box .title {
  font-size: 12px;
  display: inline-block;
  white-space: nowrap;
  text-align: right;
  padding-right: 5px;
}
.searchBox .left .Search-box .el-input {
  margin: 10px 0 10px 0;
  width: 200px;
}
.searchBox .left .Search-box .el-date-editor .el-range-separator {
  width: 22px !important;
}
.searchBox .left .number .el-input {
  margin: 10px 5px;
  width: 100px;
}
.searchBox .leftclone .Search-box {
  flex: 0 !important;
}
.searchBox .leftclone .Search-box .el-input {
  width: 200px !important;
}
.searchBox .right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 20px;
}
</style>

下拉多選組件：selectecho文章來源地址http://www.zghlxwxcb.cn/news/detail-480573.html

<template>
  <div class="selectecho">
    <el-select v-model="datasource"
      ref="selectref"
      :placeholder="selectPlaceholder==''?'請選擇':selectPlaceholder"
      :disabled="disabledfalg"
      @focus="switchfun"
      clearable
      @change="changedatasource"
      :multiple="!singlechoice"
      collapse-tags
      size="mini">
      <el-option :value="item[displayfields.id]"
        :label="item[displayfields.name]+`${singlechoice&&item[displayfields.code?displayfields.code:(displayfields.id&&displayfields.id!==displayfields.name)]?('('+item[displayfields.code?displayfields.code:displayfields.id]+')'):''}`"
        v-for="item in data.length?data:dataCustom"
        :key="item[displayfields.id]"></el-option>
    </el-select>
    <el-dialog :close-on-click-modal="false"
      :title="title"
      class="dialogBox"
      :visible.sync="centerDialog.visible"
      :width="dialogWidth"
      :append-to-body="true"
      center>
      <div class="Selecteddata">
        <div class="title">已 選</div>
        <span v-if="dataselected.length==0">未選擇~</span>
        <div class="selectlist">

          <div class="termselect"
            v-for="(item,index) in dataselected"
            :key="item[displayfields.id]">
            <span>{{item[displayfields.name]+`${item[displayfields.code?displayfields.code:(displayfields.id&&displayfields.id!==displayfields.name)]?('('+item[displayfields.code?displayfields.code:displayfields.id]+')'):''}`}}</span>

            <i @click="deleteselect(index)"
              class="el-icon-circle-close"></i>
          </div>
        </div>
      </div>
      <div class="seachlist">
        <div class="title">搜 索</div>
        <div class="seachinput">
          <el-input clearable
            v-model="searchfrom[displayfields.seach]"
            :placeholder="placeholder"
            size="mini">
          </el-input>
          <el-button @click="searchfrom[displayfields.seach]='',Initialrequest(1)"
            size="mini">重 置</el-button>
          <el-button size="mini"
            @click="Initialrequest(1)"
            type="primary">搜 索</el-button>
        </div>
      </div>
      <div class="tab">
        <div class="title">全部數(shù)據(jù)</div>
        <template>
          <el-table ref="multipleTable"
            :data="centerDialog.data"
            tooltip-effect="dark"
            border
            fit
            :header-cell-class-name="cellClass"
            max-height="300px"
            size="mini"
            @select="handleSelection"
            @select-all="handleSelectionall">
            <el-table-column :selectable="selectable"
              fixed
              type="selection"
              width="55"
              align="center">
            </el-table-column>
            <el-table-column label="序號"
              width="50">
              <template slot-scope="scope">{{(scope.$index+1)+(searchfrom.current-1)*searchfrom.size}}</template>
            </el-table-column>
            <el-table-column show-overflow-tooltip
              v-for="(item,index) in columns"
              :key="index"
              :min-width="item.width"
              :prop="item.prop"
              :label="item.label"></el-table-column>
          </el-table>
        </template>
      </div>
      <div class="fenye">
        <el-pagination @size-change="Initialrequest"
          @current-change="Initialrequest"
          :current-page.sync="searchfrom.current"
          background
          :small="true"
          :page-sizes="[20, 50, 100, 200]"
          :page-size.sync="searchfrom.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="centerDialog.total"></el-pagination>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="centerDialog.visible = false"
          size="mini">取 消</el-button>
        <el-button type="primary"
          @click="Submit"
          size="mini">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Bus from "@/store/Bus";
import api from "@/api";
export default {
  name: "select-echo",
  props: {
    // 是否禁用
    disabledfalg: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 編輯時(shí)已選的
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 輸入框提示文字
    placeholder: {
      type: String,
      default: () => {
        return "";
      }
    },
    //外面下拉顯示下拉框文字提示
    selectPlaceholder: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 搜索條件
    search: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 是否返回整個(gè)對象
    currentline: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 是否在列表上
    positionindex: {
      type: Number,
      default: () => {
        return -1;
      }
    },
    // 顯示字段（下拉框返回的兩個(gè)字段以及列表中與其相對應(yīng)的字段和搜索列表字段）
    displayfields: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 是否單選
    singlechoice: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 列表展示字段
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 接口文件
    classification: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 產(chǎn)品圖號已選數(shù)據(jù)
    productselected: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 彈框標(biāo)題
    title: {
      type: String,
      default: () => {
        return "";
      }
    },
    //彈框?qū)挾?/span>
    dialogWidth: {
      type: String,
      default: () => {
        return "686px";
      }
    },
    // 接口路徑
    url: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  data () {
    return {
      filterText: "",
      dataCustom: [],
      datasource: [], // 已選中選中的唯一標(biāo)識
      dataselected: [], //彈框展示中的選中
      selecData: [], //用于單獨(dú)拉去數(shù)據(jù)
      searchfrom: {}, //用戶vue的雙向綁定缺陷
      currentlinelist: [], //當(dāng)前數(shù)據(jù)的所有信息
      multipleSelection: [], //用于列表選中（現(xiàn)在只用于列表反選）
      centerDialog: {
        visible: false,
        data: [],
        total: 0
      }
    };
  },
  watch: {
    data: {
      //用于在監(jiān)聽選中數(shù)據(jù)時(shí)取出唯一標(biāo)識
      handler (val) {
        let that = this;
        this.$nextTick(() => {
          if (!that.singlechoice) {
            that.datasource = that.data.map(item => {
              return item[that.displayfields.id];
            });
          } else {
            that.datasource = that.data.length
              ? that.data[0][that.displayfields.id]
              : "";
          }
        });
      },
      deep: true,
      immediate: true
    },

    dataCustom: {
      //用于在監(jiān)聽選中數(shù)據(jù)時(shí)取出唯一標(biāo)識
      handler (val) {
        let that = this;
        if (that.data.length > 0) {
          return;
        }
        if (!that.singlechoice) {
          that.datasource = that.dataCustom.map(item => {
            return item[that.displayfields.id];
          });
        } else {
          that.datasource = that.dataCustom.length
            ? that.dataCustom[0][that.displayfields.id]
            : "";
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.searchfrom = this.search;
  },

  // 在 methods 中定義方法
  methods: {
    cellClass (row) {
      // console.log(row);
      if (row.columnIndex === 0 && this.singlechoice) {
        return "DisableSelection";
      }
    },

    /**
     * 判斷右側(cè)表格數(shù)據(jù)是否能夠被勾選刪除
     */
    selectable (row, index) {
      if (this.dataselected.length == 0 || !this.singlechoice) {
        if (this.singlechoice && this.productselected.length) {
          let falg = true;
          if (
            this.productselected.some(el => {
              return el === row[this.displayfields.listid];
            })
          ) {
            return false;
          } else {
            return true;
          }
        }
        return true;
      } else {
        return false;
      }
    },
    // 刪除選擇
    deleteselect (val) {
      this.dataselected.splice(val, 1);
      this.$nextTick(() => {
        this.antielection();
      });
    },
    // 下拉選擇
    changedatasource () {
      let arr = [],
        currentlinelist = [];
      this.datasource &&
        this.datasource.forEach(item => {
          this[this.data.length ? "data" : "dataCustom"].forEach(row => {
            if (item == row[this.displayfields.id]) {
              arr.push(row);
            }
          });
          this.currentlinelist.forEach(row => {
            if (item == row[this.displayfields.listid]) {
              currentlinelist.push(row);
            }
          });
        });
      this.currentlinelist = currentlinelist;
      this.selecData = arr;

      this.$emit("selectecho", arr, this.positionindex, this.currentlinelist);
    },
    // 確認(rèn)選擇的數(shù)據(jù)
    Submit () {
      this.selecData = this.dataselected;
      this.$emit(
        "selectecho",
        this.dataselected,
        this.positionindex,
        this.currentlinelist
      );

      this.centerDialog.visible = false;
    },
    // 單選數(shù)據(jù)
    handleSelection (selection, val) {
      let arr = selection.filter(item => {
        return item != undefined;
      });
      let falg = false;
      arr.forEach(item => {
        if (val[this.displayfields.listid] == item[this.displayfields.listid]) {
          falg = true;
        }
      });
      let Displayobject = {};
      if (falg) {
        Displayobject[this.displayfields.id] = val[this.displayfields.listid];
        if (this.displayfields.code) {
          Displayobject[this.displayfields.code] =
            val[this.displayfields.listcode];
        }
        Displayobject[this.displayfields.name] =
          val[this.displayfields.listname];
        this.dataselected.push(Displayobject);
        this.currentlinelist.push(val);
      } else {
        this.dataselected.forEach((item, index) => {
          if (item[this.displayfields.id] == val[this.displayfields.listid]) {
            this.dataselected.splice(index, 1);
          }
        });
        this.currentlinelist.forEach((item, index) => {
          if (
            item[this.displayfields.listid] == val[this.displayfields.listid]
          ) {
            this.currentlinelist.splice(index, 1);
          }
        });
      }
    },
    // 全選數(shù)據(jù)
    handleSelectionall (val) {
      let arr = val.filter(item => {
        return item != undefined;
      });
      // console.log(arr.length);

      if (arr.length) {
        // 全選
        let selectall = [...this.dataselected];
        arr.forEach(item => {
          let Displayobject = {};
          Displayobject[this.displayfields.id] =
            item[this.displayfields.listid];
          if (this.displayfields.code) {
            Displayobject[this.displayfields.code] =
              item[this.displayfields.listcode];
          }
          Displayobject[this.displayfields.name] =
            item[this.displayfields.listname];
          selectall.push(Displayobject);
          this.currentlinelist.push(item);
        });
        // 去重
        let res = new Map();
        this.currentlinelist = this.currentlinelist.filter(
          a =>
            !res.has(a[this.displayfields.listid]) &&
            res.set(a[this.displayfields.listid], 1)
        );
        let ress = new Map();
        selectall = selectall.filter(
          a =>
            !ress.has(a[this.displayfields.id]) &&
            ress.set(a[this.displayfields.id], 1)
        );
        this.dataselected = selectall;
      } else {
        //全不選
        this.centerDialog.data.forEach(item => {
          this.dataselected.forEach((row, index) => {
            if (item[this.displayfields.listid] == row[this.displayfields.id]) {
              this.dataselected.splice(index, 1);
            }
          });
          this.currentlinelist.forEach((row, index) => {
            if (
              item[this.displayfields.listid] == row[this.displayfields.listid]
            ) {
              this.currentlinelist.splice(index, 1);
            }
          });
        });
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    // 反選列表數(shù)據(jù)
    antielection () {
      this.multipleSelection = JSON.parse(JSON.stringify(this.dataselected));
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection.forEach(row => {
            // 不能自己自定義對象來設(shè)置選中（原因如下分析），那我可以從列表中找到需要選中的那個(gè)對象，然后把它拿過來作為選中的項(xiàng)就可以了
            this.$refs.multipleTable.toggleRowSelection(
              this.centerDialog.data.find(item => {
                return (
                  row[this.displayfields.id] == item[this.displayfields.listid]
                ); // 注意這里尋找的字段要唯一
              }),
              true
            );
          });
          this.multipleSelection = JSON.parse(
            JSON.stringify(this.productselected)
          );

          this.multipleSelection.forEach(row => {
            // 不能自己自定義對象來設(shè)置選中（原因如下分析），那我可以從列表中找到需要選中的那個(gè)對象，然后把它拿過來作為選中的項(xiàng)就可以了
            this.$refs.multipleTable.toggleRowSelection(
              this.centerDialog.data.find(item => {
                return row == item[this.displayfields.listid]; // 注意這里尋找的字段要唯一
              }),
              true
            );
          });
        });
      }, 200);
    },
    //初始數(shù)據(jù)請求
    Initialrequest (val) {
      if (val == 1) {
        this.searchfrom.current = 1;
      }
      // console.log(this.searchfrom);
      api[this.classification][this.url](this.searchfrom).then(res => {
        this.centerDialog.data = res.data.records;
        this.centerDialog.total = res.data.total;
        this.antielection();
      });
    },
    // 打開彈框
    switchfun () {
      this.centerDialog.visible = true;
      this.searchfrom.current = 1;
      this.searchfrom = { ...this.search };
      this.currentlinelist = [];
      this.searchfrom[this.displayfields.seach] = "";
      // 分開彈框展示在未確認(rèn)前端不更改選擇框中的數(shù)據(jù)
      this.dataselected = [];
      this.data.length &&
        (this.dataselected = JSON.parse(JSON.stringify(this.data)));
      this.dataCustom.length &&
        (this.dataselected = JSON.parse(JSON.stringify(this.dataCustom)));

      this.$refs.selectref.blur();
      this.Initialrequest(); //初始數(shù)據(jù)請求
    }
  }
};
</script>

<style lang="less" scoped>
.tab {
  width: 100%;
  .title {
    font-weight: bold;
    text-align: left;
  }
}

.fenye {
  position: relative;
  top: 10px;
  display: flex;
  z-index: 9999;
  justify-content: space-between;
  align-items: center;
}
.selectecho {
  width: 100%;
}
.Selecteddata,
.seachlist {
  width: 100%;
  .title {
    font-weight: bold;
    text-align: left;
  }
  .seachinput {
    display: flex;
    padding: 10px 0;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .selectlist {
    width: 100%;
    &:hover {
      color: rgba(0, 0, 0, 0.3);
    }
    & > span:first-child {
      color: rgba(0, 0, 0, 0.3);
    }
    display: flex;
    max-height: 100px;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: rgba(0, 0, 0, 0.1);
    // box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    transition: color 0.3s ease;
    flex-wrap: wrap;
    .termselect {
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      padding-left: 5px;
      font-size: 12px;
      margin: 5px;
      .el-icon-circle-close {
        margin: 0 5px;
        font-weight: bold;
      }
      .el-icon-circle-close:hover {
        cursor: pointer;
      }
    }
  }
}
</style>

到了這里，關(guān)于vue2+element ui封裝搜索組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！