vue2+element ui封装搜索组件

组件使用

<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",
  // 初始数据定义处
  data () {
    return {
      //搜索参数配置
      searchInfo: {
        test1: "",
        test2: false,
        test3: "",
        test4: [],
        test5: [],
        test6: [],
        test7: "",
        test8: [],
        current: 1,
        size: 20,
        orderBy: "",
        asc: false
      },
      //参数配置
      searchItem: [
        {
          type: "Input",
          label: "输入框:",
          prop: "test1"
        },
        {
          type: "Checkbox",
          label: "选择框",
          prop: "test2",
          hint: "",
        },
        {
          type: "Select",
          label: "下拉单选:",
          prop: "test3",
          filterable: true,
          options: [
            { value: 1, label: "选项1" },
            { value: 2, label: "选项2" },
          ]
        },
        {
          type: "Selects",
          label: "下拉多选:",
          prop: "test4",
          filterable: true,
          options: [
            { value: 1, label: "选项1" },
            { value: 2, label: "选项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: "选项1" },
            { value: 2, label: "选项2" },
          ]
        },
        {
          type: "Date",
          label: "日期:",
          prop: "test7",
          dateFormate: "yyyy-MM-dd HH:mm:ss",
          timeType: "datetime"
        },
        {
          type: "Time_feame",
          label: "时间区间:",
          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="结束月份">
            </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>
        <!-- 时间段 -->
        <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="结束"></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
    },
    //表单数据
    formData: {
      type: Object,
      default: () => { }
    },
    //表单配置
    formItem: {
      type: Array,
      default: () => { }
    },
    //按钮
    formHandler: {
      type: Array,
      default: () => { }
    },
    //验证
    verification: {
      default () {
        return () => { };
      },
      type: Function
    }
  },
  // props: ['child1Info'],
  data () {
    return {
      selectedData: {},
      //提示信息
      type_msg: {
        Input: "请输入",
        Radio: "请选择",
        Checkbox: "请选择",
        Select: "请选择",
        Date: "请选择"
      }
    };
  },
  // 组件注册
  components: {
    selectecho
  },
  watch: {},

  // 在 methods 中定义方法
  methods: {
    //必填标识
    classObject (flag) {
      return {
        mustInput: flag
      };
    },
    // 获取组件中选取得数据
    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;
    },
    // 重置下拉分页数据源
    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);
        }
        //自定义验证规则
        if (item.validator) {
          item.rules = item.validator;
        }
      });
      this.form = formData;
    },
    // 规则
    rules (item) {
      const requiredRules = [
        {
          required: true,
          message:
            item.required_msg || `${this.type_msg[item.type]}${item.lable}`,
          trigger: "blur"
        }
      ];
      //其他规则
      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

<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">全部数据</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;
      }
    },
    // 编辑时已选的
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 输入框提示文字
    placeholder: {
      type: String,
      default: () => {
        return "";
      }
    },
    //外面下拉显示下拉框文字提示
    selectPlaceholder: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 搜索条件
    search: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 是否返回整个对象
    currentline: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 是否在列表上
    positionindex: {
      type: Number,
      default: () => {
        return -1;
      }
    },
    // 显示字段（下拉框返回的两个字段以及列表中与其相对应的字段和搜索列表字段）
    displayfields: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 是否单选
    singlechoice: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 列表展示字段
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 接口文件
    classification: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 产品图号已选数据
    productselected: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 弹框标题
    title: {
      type: String,
      default: () => {
        return "";
      }
    },
    //弹框宽度
    dialogWidth: {
      type: String,
      default: () => {
        return "686px";
      }
    },
    // 接口路径
    url: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  data () {
    return {
      filterText: "",
      dataCustom: [],
      datasource: [], // 已选中选中的唯一标识
      dataselected: [], //弹框展示中的选中
      selecData: [], //用于单独拉去数据
      searchfrom: {}, //用户vue的双向绑定缺陷
      currentlinelist: [], //当前数据的所有信息
      multipleSelection: [], //用于列表选中（现在只用于列表反选）
      centerDialog: {
        visible: false,
        data: [],
        total: 0
      }
    };
  },
  watch: {
    data: {
      //用于在监听选中数据时取出唯一标识
      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: {
      //用于在监听选中数据时取出唯一标识
      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";
      }
    },

    /**
     * 判断右侧表格数据是否能够被勾选删除
     */
    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);
    },
    // 确认选择的数据
    Submit () {
      this.selecData = this.dataselected;
      this.$emit(
        "selectecho",
        this.dataselected,
        this.positionindex,
        this.currentlinelist
      );

      this.centerDialog.visible = false;
    },
    // 单选数据
    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);
          }
        });
      }
    },
    // 全选数据
    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;
    },
    // 反选列表数据
    antielection () {
      this.multipleSelection = JSON.parse(JSON.stringify(this.dataselected));
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection.forEach(row => {
            // 不能自己自定义对象来设置选中（原因如下分析），那我可以从列表中找到需要选中的那个对象，然后把它拿过来作为选中的项就可以了
            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 => {
            // 不能自己自定义对象来设置选中（原因如下分析），那我可以从列表中找到需要选中的那个对象，然后把它拿过来作为选中的项就可以了
            this.$refs.multipleTable.toggleRowSelection(
              this.centerDialog.data.find(item => {
                return row == item[this.displayfields.listid]; // 注意这里寻找的字段要唯一
              }),
              true
            );
          });
        });
      }, 200);
    },
    //初始数据请求
    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] = "";
      // 分开弹框展示在未确认前端不更改选择框中的数据
      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(); //初始数据请求
    }
  }
};
</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>