SearchCompany

最新推荐文章于 2024-09-29 14:12:41 发布

F-Fanger

最新推荐文章于 2024-09-29 14:12:41 发布

阅读量375

点赞数

分类专栏： vue+element

本文链接：https://blog.csdn.net/qq_41287158/article/details/115479423

版权

vue+element 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<template>
  <div id="companySearch">
    <el-select
      v-model="visible"
      class="elSelectCom"
      placeholder="请选择"
      v-el-select-loadmore="loadmore"
      popper-class="companySearchselect"
    >
      <div class="InputSearch" style="">
        <el-input
          size="mini"
          style="width:180px;height:28px"
          clearable
          v-model="page.searchCode"
          @keyup.enter.native="searchCompany"
          prefix-icon="el-input__icon el-icon-search"
        ></el-input>
      </div>
      <br />
      <el-option
        v-for="item in options"
        :key="item.tenant_info.id"
        :label="item.tenant_info.real_name"
        :value="item.tenant_info.real_name"
      >
        <span style="float: left">{{ item.tenant_info.real_name }}</span>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector(
          '.el-select-dropdown .el-select-dropdown__wrap'
        )
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    vilageId: {
      type: Number,
      default: 0
    }
  },
  name: 'companySearch',
  data() {
    return {
      options: [],
      visible: '',
      userInput: '',

      page: {
        pageIndex: 1,
        pageSize: 20,
        searchCode: '',
        village_id: 0
      }
    }
  },
  watch: {
    value(val) {
      this.visible = val
    },
    visible(val) {
      this.$emit('selectVal', val)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    searchCompany() {
      this.getList('search')
    },

    loadmore() {
      this.page.pageIndex++
      this.getList()
    },

    async getList(val) {
      this.dataList = []
      let query = {
        pageIndex: this.page.pageIndex - 1,
        pageSize: this.page.pageSize,
        queryJson: [],
        direction: '',
        sortName: ''
      }
      if (this.page.searchCode !== '') {
        query.queryJson.push({
          paramName: 'fuzzy_query',
          paramValue: this.page.searchCode,
          operator: 6
        })
      }

      query.queryJson.push({
        paramName: 'village_id',
        paramValue: this.vilageId,
        operator: 0
      })

      query.queryJson = JSON.stringify(query.queryJson)

      const {
        message,
        data: { content, totalElements }
      } = await this.$myRequest(this.$api.getRentalInfoList, query, {
        showLoading: false
      })
      if (val) {
        if (content === null) return
        this.options = content
      } else {
        this.options = [...this.options, ...content]
      }
    }
  }
}
</script>
<style lang="scss">
.elSelectCom {
  position: relative;
}
.InputSearch {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 10px 5px 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  z-index: 9999;
  height: 38px;
  > .el-input {
    line-height: 28px;
  }
}
.companySearchselect /deep/ .el-select-dropdown__item {
  padding: 0 !important;
}
.companySearchselect /deep/ .el-select-dropdown__item:first-of-type {
  margin-top: 10px;
}
</style>