工作需求ElementUi组件的使用

加油，新时代打工人！

组件源码

<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"borderstyle="width: 100%"@row-click="handleRowClick"><el-table-columnprop="originCode"label="产地编码"width="180"></el-table-column><el-table-columnprop="originName"label="产地名称"width="180"></el-table-column><el-table-columnprop="zjm"label="助记码"width="70"></el-table-column></el-table><div class="paginationclass"><paginationv-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 = trueif(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>

导入

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

使用

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