工作需求iview 组件的使用

加油，新时代打工人！

源码下载地址

<template>
  <div @mouseenter="mousein = true" @mouseleave="mousein = false">
     <el-input type="text" clearable autocomplete="off" v-model="searchDoc.code"  placeholder="请选择" size="small" :style="style"
      @on-focus="handleShowDatatable(true)" @on-blur="handleShowDatatable(false)" @on-change="handleSearchData" />
    <div ref="tableContainer" :style="tableStyle" v-show="showDatatable" >
       <el-table
      :data="searchData"
      style="width:500px;"
      @row-click="handleRowClick">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
       <el-table>
    </div>
  </div>
</template>

<script>

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

      },
  },
  data(){
    return {
      loading: false,
      searchDoc: {
        code: '',
        id: 0
      },
      mousein: false,
      showDatatable: false,
      tableStyle: {
        'position':'absolute',
        'background-color':'#FFFFFF',
        'z-index':10,
        'max-height':'200px',
        'overflow-y':'auto',
      },
      searchColumns: [
        {
            title: '编码',
            key: 'code',
            width: 160
        },
        {
            title: '名称',
            key: 'name',
            width: 170
        },
        {
            title: '助记码',
            key: 'mnemonicCodes'
        }
      ],
      searchData: []
    }
  },
  methods: {
    handleSearchData(){ 
      this.loading = true
      axios.request({
        url: '/diseaseCode/selectByCode',
        method: 'get',
        params: {
        code: this.searchDoc.code
        }
      }).then(res => {
          this.searchData = res.data
      }).catch(err => {
        this.$Message.error('请求疾病编码信息时异常: ', err)
      }).finally(() => {
        this.loading = false
      })
    },
      handleRowClick(item){
          this.searchDoc = {
              code: item.code,
              name:item.name,
              mnemonicCodes:item.mnemonicCodes
          }
          let data={
              index:this.index,
              searchDoc:this.searchDoc
          }
          this.$emit('sendcode',data.searchDoc.code)
          this.closeDatatable()
      },
    handleShowDatatable(isShow){
      if(!this.mousein && !isShow){
        this.showDatatable = false
      }else{
        this.showDatatable = true
        if(this.searchData.length == 0){
          this.handleSearchData()
        }
      }
    },
    closeDatatable(){
      this.showDatatable = false
    }
  },
  computed: {
    style(){
      let style = {width: '200px'}
      if(this.width){
        style.width = `${this.width}px`
      }
      return style
    }
  },
  watch: {
    searchDoc: function(val){
      if(!val.code){
        this.searchDoc.id = 0
      }
      this.$emit('input', this.searchDoc)
    }
  },
  mounted(){
  }
  
}
</script>