工作需求ElementUi组件的使用

加油，新时代打工人！

html 复制代码

<template>
  <div @mouseenter="mousein = true" @mouseleave="mousein = false">
     <el-input type="text" clearable autocomplete="off" v-model="searchDoc.originName"  placeholder="请选择" size="small" :style="style"
      @focus="handleShowDatatable(true)" @blur="handleShowDatatable(false)" @input="getList" />
    <div ref="tableContainer" :style="tableStyle" v-show="showDatatable" >
       <el-table
      :data="tableData"
        border
      style="width: 100%"
      @row-click="handleRowClick">
      <el-table-column
        prop="originCode"
        label="产地编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="originName"
        label="产地名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="zjm"
        label="助记码"
        width="70">
      </el-table-column>
       </el-table>
    <div class="paginationclass">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageIndex"
        :limit.sync="pagination.pageSize"
        @pagination="getList"
      />
    </div>
    </div>
  </div>
  
</template>

<script>
import{  
    getMnufacturerList
} from "@/api/manufacturer/manufacturer.js"

export default {
  name: 'MyFacturerName',
  props: {
    value: {
      type: Object
    },
    width: {
      type: [Number, String]
    },
      index:{
          type: [Number, String]

      },
  },
  data(){
    return {
      loading: false,
      searchDoc: {
        originName: '',
        id: 0
      },
      mousein: false,
      showDatatable: false,
      tableStyle: {
        'position':'absolute',
        'background-color':'#FFFFFF',
        'z-index':10,
        'max-height':'200px',
        'overflow-y':'auto',
      },
       pagination: {
        pageIndex: 1,
        pageSize: 10,
      },
      queryParams: {
        originName: "",
      },

      total: 0,
      tableData: [],
      selectRow: null,
    }
  },
  methods: {
   getList() {
      getMnufacturerList({
        ...this.pagination,
        ...this.queryParams,
        originName:this.searchDoc.originName
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }).catch((err) => {
          this.$Message.error('请求产地信息时异常: ', err)
      }).finally(() => {
          this.loading = false
      });
    },

      handleRowClick(item){
          this.searchDoc = {
              originCode: item.originCode,
              originName:item.originName,
              zjm:item.zjm,
              providerName:item.providerName
          }
          let data={
              index:this.index,
              searchDoc:this.searchDoc
          }
          this.$emit('sendname',data.searchDoc.providerName)
          this.closeDatatable()
      },
    handleShowDatatable(isShow){
      if(!this.mousein && !isShow){
        this.showDatatable = false
      }else{
        this.showDatatable = true
        if(this.tableData.length == 0){
          this.getList()
        }
      }
    },
    closeDatatable(){
      this.showDatatable = false
    }
  },
  computed: {
    style(){
      let style = {width: '180px'}
      if(this.width){
        style.width = `${this.width}px`
      }
      return style
    }
  },
  watch: {
    searchDoc: function(val){
      if(!val.originName){
        this.searchDoc.id = 0
      }
      this.$emit('input', this.searchDoc)
    }
  },
  mounted(){

  }
  
}
</script>
<style scoped>
.paginationclass {
  margin-left: 40%;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>

导入

html 复制代码

import MyFacturerName from "@/components/MyFacturerMedid/My-Facturer-medid.vue";

使用

html 复制代码

<MyFacturerName @sendzjm="setfaceturerName" :index1="scope.$index">
</MyFacturerName>