vue2+element ui封装搜索组件

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/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">全部数据</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>

到了这里,关于vue2+element ui封装搜索组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui Vue 封装组件按钮工具栏,使用slot插槽

    封装常用按钮工具栏,方便其它页面调用 缺点:工具栏下面div会显示工具栏下面,下面需要使用margin-top:40px(小学生一个没整明白)希望大神能帮解决 运行效果          组件代码 tt-btnBar.vue 父窗口调用 testbtnbar.vue

    2024年02月02日
    浏览(44)
  • VUE2+Element-ui+封装Echarts图表

    封装Echarts图表,如下效果图 Home组件代码块,使用的mock.js模拟数据封装 Echarts图表组件 安装所需依赖 cnpm i axios -S 安装axios接口请求 cnpm i mockjs 或 yarn add mockjs 安装mockjs生成模拟随机数据 cnpm i echarts 或 yarn add echarts 安装echarts图表 cnpm i element-ui -S 安装element-ui组件库 安装less c

    2024年02月08日
    浏览(48)
  • 【Vue2+Element ui通用后台】整体布局、数据展示、axios封装

    我们新建 Home 组件来展示右侧的内容 整体布局我们使用layout布局,通过基础的 24 分栏,迅速简便地创建布局。由于左侧占比较小,我们分为 8 和 16 即可 然后每个卡片样式的部分,我们使用 Card 卡片 我们先增加一个个人信息的展示: 然后在App.vue 中给 p 标签去掉默认样式 在

    2024年02月14日
    浏览(32)
  • vue2+element-ui el-tree树形控件封装

    1.封装 根据官网配置项封装了下el-tree 方便维护和复用,有用的话点赞收藏叭~ 2.使用 如若要对不同的一级二级节点设置不同的样式可以参考这样:

    2024年02月12日
    浏览(64)
  • vue2.x 二次封装element ui 中的el-dialog

    在做后台管理系统的时候,dialog组件是我们使用频率比较高的组件,但是有一些需求现有的组件是不满足的。因此会需要我们做二次封装。 组件本身的属性我们保留,只需要根据需求添加,然后在使用的时候props去拿取使用就可以了。 本次遇到的问题是如何在父组件去控制

    2024年02月07日
    浏览(59)
  • Vue2 - 引入Element-UI组件样式

    官方文档 https://element.eleme.cn/#/zh-CN/component/installation 推荐使用 npm 的方式安装 ,它能更好地和 webpack 打包工具配合使用。 在终端cd到项目文件夹下安装 也可以通过CDN(不推荐) 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    2024年02月06日
    浏览(63)
  • Vue2+Element-UI的el-steps封装与修改样式

     

    2024年02月14日
    浏览(47)
  • Vue + Element UI 前端篇(七):功能组件封装

    为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言切换也被封装成为了组

    2024年02月09日
    浏览(39)
  • vue2引入Element UI组件去创建新页面的详细步骤

    目录 一、Element UI介绍 Element UI的特点: 二、下载配置Element UI (零)创建vue项目 (一)下载Element UI依赖   (二)全局文件main.js中引入Element UI 三、删除多余的东西  (一)删除App.vue多余的  (二)删除多余的页面  (三)删除router路由多余的  四、新建vue页面 (一)新建

    2024年02月12日
    浏览(38)
  • Vue搜索组件,显示热门、近期搜索(结合element ui)

    🚀 注重版权,转载请注明原作者和原文链接 🥭 作者:全栈小袁 🍎 原创个人开源博客项目(目前V3.0版本):https://github.com/yuanprogrammer/xiaoyuanboke 🍉 开源项目觉得还行的话点点star,有什么需要完善或者点子欢迎提issue 也是好久没有发文章了,之前忙着秋招校招春招,入职后一

    2024年02月16日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包