工作需求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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/758961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7.安全性基础知识

主要议题&#xff1a; 安全防护体系&#xff1a;7层次&#xff0c;要记7层次的名称以及这些层次与哪些方面相关&#xff1b; 安全保护等级&#xff1a;5等级&#xff0c;要记5等级安全性的高低排序&#xff0c;掌握每个等级的特点&#xff1b; 用户认证机制&#xff1a;用户认…

[小程序开发] npm

一、自定义构建npm 1、在project.config.json文件中的 "miniprogramRoot"指定小程序源码目录。 "miniprogramRoot": "miniprogram/", 2、在project.config.json文件中的setting.packNpmManually为true&#xff0c;开启自定义node_modules和minip…

bert源码分析之tokenization

import collections# 集合模块 import re# 正则模块 import unicodedata#判断字符类别模块 import six#判断版本 import tensorflow as tf # 用于检查传入的参数do_lower_case和真正的模型是否一致 # do_lower_case: 一个布尔值&#xff0c;表示是否将文本转换为小写 # init_ch…

python网络爬虫实战教学——urllib的使用(2)

文章目录 专栏导读1、前言2、URLError3、HTTPError4、urlparse5、urlunparse 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对…

牛客刷题 | HJ68 成绩排序, HJ69 矩阵乘法,HJ70 矩阵乘法计算量估算

HJ68 成绩排序 题目链接 思路建立字典&#xff0c;key代表名字&#xff0c;value为数字&#xff0c;最后sorted函数按规定排序。注意名单中的名字会重名&#xff0c;所以key应该是名字加上编号&#xff0c;以免同名的分数被覆盖。将编号填充为3位数&#xff0c;方便最后输出名…

第1章 数据管理

思维导图 1.1 引言 从数据中获取的价值不可能凭空产生或依赖于偶然&#xff0c;需要有目标、规划、协作、和保障&#xff0c;也需要管理和领导力。定义&#xff1a; 数据管理是为了交付、控制、保护并提升数据和信息资产的价值&#xff0c;在其整个生命周期中制定计划、制度、…

【Web】浅聊Hessian反序列化原生jdk利用与高版本限制绕过

目录 前言 原理分析 EXP Hessian2 低版本 直接Runtime命令执行 Hessian2 高版本 利用Unsafe加载恶意字节码二次调用触发初始化 利用TemplatesImpl实例化恶意类 jdk高版本打JNDI 前文&#xff1a;【Web】浅聊Hessian异常toString姿势学习&复现 前言 上篇文章介绍…

mysql笔记:23. 在Mac上安装与卸载MySQL

文章目录 下载MySQL安装包1. 打开MySQL官网&#xff0c;点击DOWNLOADS2. 点击GPL Downloads3. 点击MySQL Community Server打开下载页面4. 选择需要的文件进行下载5. ARM or x86 DMGbrewTAR卸载1. 在系统中卸载2. 在终端中卸载 MySQL对Mac电脑的适配十分强大&#xff0c;再加上…

Oracle with as用法

一、简介 with…as关键字&#xff0c;是以‘with’关键字开头的sql语句&#xff0c;在实际工作中&#xff0c;我们经常会遇到同一个查询sql会同时查询多个相同的结果集&#xff0c;即sql一模一样&#xff0c;这时候我们可以将这些相同的sql抽取出来&#xff0c;使用with…as定…

VMware迁移虚拟机后,源存储和新存储均能看到VM名称

描述&#xff1a;两台FC存储&#xff0c;各映射两个LUN。将源存储虚拟机迁移至新存储 源存储位置 DS5020-LUN1 新存储位置 V7000Test-LUN1 迁移任务均执行成功&#xff0c;无任何报错。但是有部分虚拟机迁移至新存储后&#xff0c;未释放源存储空间。在新旧存储列表都能看见…

后端使用前端页面的很好的推荐Layui

使用前提条件就是掌握初步的html&#xff0c;css&#xff0c;js脚本 后端被前端的vue等框架&#xff0c;不想学习&#xff0c;就是简单的一个页面满足后端使用 一般建议就是掌握了基础的html&#xff0c;css&#xff0c;js脚本后&#xff0c;然后就是深入学习了解jquery,再找…

手拉手整合Springboot3+RocketMQ2.3

RocketMQ 基本概念 消息模型Message Model RocketMQ 主要由 Producer、Broker、Consumer 三部分组成&#xff0c;其中 Producer 负责生产消息&#xff0c;Consumer 负责消费消息&#xff0c;Broker 负责存储消息。Broker 在实际部署过程中对应一台服务器&#xff0c;每个 Bro…

PHP全新美化广告横幅在线制作源码

源码简介 可以做网站的引流不需要安装上传就可以使用&#xff0c;在第一版基础上做了二次开发更加好用 注意&#xff1a;主机和服务器均可架设搭建,如果使用宝塔架设点击访问的时候提示找不到文件路径的时候,记得点击网站目录把防跨站攻击先关闭,这样就可以正常访问了,这款是…

Mysql查询与统计

单表查询 例如&#xff1a;查询某个表中的某些数据 select * from 表名; select 字段1,字段2 from 表名; 多表查询&#xff1a;join on 例如&#xff1a;查询多个表中的数据&#xff0c;例如&#xff1a;表1写的是商品信息&#xff1a;商品ID&#xff0c;名字&#xff0c;表…

两台电脑简单的通信过程详解(局域网,同网段)

来源&#xff1a; https://www.bilibili.com/video/BV1BA411373b/ 一、原理 描述过程&#xff1a;分别以PC1、PC2、PC2、PC1的角度 二、eNSP测试 1.连接设备 2.查看PC1情况 3.打开抓包后&#xff0c;再ping一下PC2 4.PC1发送ARP报文 broadcast 意思为广播(IP都是f,意为255…

【数字图像处理matlab系列】保存图像

【数字图像处理系列】保存图像imwrite函数 使用函数imwrite可以将图像保存到本地上&#xff0c;该函数的语法为 imwrite(image_data, filename)其中&#xff0c;image_data是要写入的图像数据&#xff0c;可以是一个矩阵或一个三维数组&#xff08;对于彩色图像&#xff09;&…

C语言程序设计-谭浩强

文章目录 1 C语言2 算法3 顺序程序设计3.1 数据的表示形式3.2 输入和输出 4 选择程序结构5 循环程序结构6 数组7 函数模块化8 指针8.1 动态内存分配 9 结构类型9.1 链表9.2 共用体 union9.3 枚举 enum9.4 typedef 10 对文件的输入输出10.1 顺序读写10.2 随机读写 1 C语言 1.1 …

Java代码基础算法练习-求给定3个数, 进行从小到大排序-2024.03.20

任务描述&#xff1a; 输入三个整数 x,y,z(0<x<1000&#xff0c;0<y<1000&#xff0c;0<z<1000)&#xff0c;请把这三个数由小到大输出。 任务要求&#xff1a; 代码示例&#xff1a; package march0317_0331;import java.util.Scanner;public class m24…

nginx配置跨域

要在Nginx中配置跨域&#xff0c;您需要编辑Nginx的配置文件&#xff08;通常是nginx.conf&#xff09;&#xff0c;在相应的server或location块中添加CORS相关的响应头。以下是具体的配置步骤&#xff1a; 打开Nginx配置文件&#xff1a;您需要找到并打开Nginx的配置文件&…

python如何在正则表达式匹配成功的位置增加字符

如果你想在正则表达式替换时保持原匹配项不变并在其后添加新内容&#xff0c;你可以使用捕获组&#xff08;capture groups&#xff09;和后向引用&#xff08;backreference&#xff09;。在正则表达式中&#xff0c;捕获组可以通过在模式中使用圆括号来创建&#xff0c;然后可…