三、ElementPlus下拉搜索加弹窗组件的封装

        近期产品提出了一个需求,要求一个form的表单里面的一个组件既可以下拉模糊搜索,又可以弹窗搜索,我就为这个封装了一个组件,下面看效果图。

        00eef765102e486482f9b2a0a92043b5.gif

d9bef8291ae24f4493f29edbabea8504.png

 

效果大家看到了,下面就看组件封装和实现方法

 

第一步,组件封装,我取名为C_SerachBtn 组件,其中的C_Select组件也可以用el-select组件来代替,C_Select使我们自己封装的组件。

1fb50761e1e44a21a732c5d27c864127.png

 

<template><div class="search-box"><C_Selectv-bind="$attrs"v-model="_modelValue"filterableremoteclearablereserve-keywordremote-show-suffix:remote-method="overhaulProjectCodeMethod":options="_options || []":loading="_loading"@focus="focus"@change="handleChangeSearchBtn($event)"/><el-button:icon="Search"color="#f5f7fa"class="search-box-btn"@click="handleBtnClick"/></div>
</template><script lang="ts" setup>
import { isFunction } from '@/utils/d_is'
import { Search } from '@element-plus/icons-vue'interface Props {value: anylabel?: anyoption?: anyoptions?: any[]// query代表的值queryValue: string// 列表label代表的字段labelField?: string// 列表label代表的字段valueField?: stringdisabledField?: string// 下拉数据请求接口api?: (arg?: any) => Promise<any>// 接口参数params?: any//返回的值和赋值的值callBackNames: any[],// 返回列表数据字段resultField?: string// 是否立即请求接口,否则将在第一次获取焦点时触发请求immediate?: boolean// 是否多选multiple?: boolean
}const props = withDefaults(defineProps<Props>(), {labelField: 'label',valueField: 'value',disabledField: 'disabled',resultField: 'records',queryValue:'',callBackNames:[],immediate: true,
})
const emits = defineEmits(['update:value','update:label','update:option','change','visible-change','remove-tag','clear','blur','focus',// 下拉接口重新请求,数据更新后触发'options-change',//按钮点击'btn-click',
])
const _selectRef = ref()
const _modelValue = ref(props.value || '')
const _options = ref(props.options || [])
const _option = ref(props.option || {})
const _loading = ref(false)watch(() => props.options,(newVal) => {if (props.api) return_options.value = newVal},{deep: true,}
)watch(() => props.option,(newVal) => {_option.value = newVal},{deep: true,}
)watch(() => props.value,(newVal) => {if (props.multiple && !Array.isArray(newVal)) {console.error('multiple 为true时,传入的value数据类型必须为array')}_modelValue.value = newVal},{immediate: true,}
)watch(() => _modelValue.value,() => {emits('update:value', _modelValue.value)},{immediate: true,}
)//标准项目编号-搜索开始
const overhaulProjectCodeMethod = async (query: string) => {if (query) {const api = props.apiif (!api || !isFunction(api)) return_options.value = []_loading.value = truelet obj= {pageNum: 1,pageSize: 10,...props.params,}obj[props.queryValue] = querylet res = await api(obj)_loading.value = falselet arr = props.labelField.split(',')_options.value = res.records.map((item) => {let str =''arr.forEach(p=> str += item[p] +' ')return {label: str,value: item[props.valueField],name: item[props.valueField],key: item[props.valueField],...item,}})} else {_options.value = []}
}async function handleChangeSearchBtn(val) {if(!val){props.callBackNames.forEach(p=>{_option.value[p.value]  = ''})return}let obj = _options.value.filter((el) => el.value == val)[0]props.callBackNames.forEach(p=>{_option.value[p.value]  = obj[p.name]})change(val)
}//按钮点击
const handleBtnClick = () => {emits('btn-click', unref(_options))
}// 下拉接口重新请求,数据更新后触发
const emitChange = () => {emits('options-change', unref(_options))
}
// 当 input 获得焦点时触发
const focus = (e) => {emits('focus', e)
}
// 选中值发生变化时触发
const change = (val) => {let data = _options.value?.filter((x) => x.value == val)emits('change', val, data)
}
// 下拉框出现/隐藏时触发
const visibleChange = (val: boolean) => {handleFetch()emits('visible-change', val)
}
// 多选模式下移除tag时触发
const removeTag = (val) => {emits('remove-tag', val)
}
// 可清空的单选模式下用户点击清空按钮时触发
const clear = (e) => {emits('clear', e)
}
// 当 input 失去焦点时触发
const blur = (e) => {emits('blur', e)
}
const getOptions = () => _options.value
defineExpose({ selectMethods: _selectRef, getOptions })
</script><style scoped>
.search-box{display: flex;width: 100%;.search-box-btn{border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-top: 1px solid #dcdfe6;border-right: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;color: #a8abb2;}
}
</style>

第二步,页面使用,在页面中el-table中当做slot使用,我的slot取名为 overhaulProjectCode

  <!-- 标准项目编号 --><template #overhaulProjectCode="{ row, index }"><C_SearchBtnv-model:value="row.overhaulProjectCode":placeholder="'请选择'":api="ListOverhaulProject":option="row":queryValue="'overhaulCode'":params="{deviceCode: 0,status: 3,}":labelField="'overhaulCode,overhaulName'":valueField="'overhaulCode'":options="[]":callBackNames="[{name: 'id',value: 'overhaulProjectId',},{name: 'overhaulCode',value: 'overhaulProjectCode',},{name: 'overhaulName',value: 'overhaulProjectName',},]"@btn-click="handleOverhaulCodeModalVisible(row, index)"@focus="handleFocus(index)"/></template>

第三步,弹窗,和一般的弹窗一样,自行封装。

<!-- 生产设备 --><materialOnetitle="选择生产设备"v-if="materialOneModalVisible":data="curRow"v-model:visible="materialOneModalVisible"@select="handleMaterialOneSelect2"@close="materialOneModalVisible = false"/>

以上就是基本的做的c_SerachBtn的组件的封装,其中的一些例如handleOverhaulCodeModalVisibl  和 handleFocus   方法需要自己定义,根据自己的具体的需求进行修改。

 

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

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

相关文章

Scratch图形化编程等级考试4级真题试卷(202409)

2024年9月Scratch图形化编程等级考试四级真题试卷 题目总数&#xff1a;24 总分数&#xff1a;100 选择题 第 1 题 单选题 Scratch运行下列程序&#xff0c;依次输入8、2、6后&#xff0c;角色说出的内容是&#xff1f;&#xff08; &#xff09; A.26862 B.62862 …

uni-app 开发微信小程序,实现图片预览和保存

1.使用 uni.previewImage() 预览图片 1.1 图片列表 1.2 预览 1.2.1 样式无法调整 1.2.2 微信小程序不支持预览本地文件路径图片&#xff08;图片上传到小程序的临时文件存储或云服务存储&#xff09; 1.3 无法绑定 longpress"saveImage(item)" 长按保存图片事件 …

C语言 | Leetcode C语言题解之第478题在圆内随机生成点

题目&#xff1a; 题解&#xff1a; typedef struct {double radius;double x_center;double y_center; } Solution;Solution* solutionCreate(double radius, double x_center, double y_center) {srand((unsigned)time(NULL));Solution *obj (Solution *)malloc(sizeof(Sol…

线性可分支持向量机的原理推导

我们从最简单也最基本的线性可分支持向量机的原理推导开始。近似线性可分支持向量机和线性不可分支持向量机的原理推导都会以线性可分支持向量机为基础。 先给线性可分支持向量机一个明确的定义。当训练数据线性可分时&#xff0c;能够通过硬间隔&#xff08;hard margin&…

LLM 推理的核心评估指标

想要优化 LLM 推理&#xff0c;首先要了解 LLM 推理的核心指标。 Time To First Token (TTFT): 首 Token 延迟&#xff0c;即从输入到输出第一个 token 的延迟。在在线的流式应用中&#xff0c;TTFT 是最重要的指标&#xff0c;因为它决定了用户体验。Time Per Output Token (…

迷茫!能走出迷茫?

我今年40有余&#xff0c;因资质平庸&#xff0c;及特殊的个人经历&#xff0c;仍奋斗在一线。上班近二十年&#xff0c;两件事对我人生走向影响最大&#xff0c;编程和炒股。 下个月要去一家新公司上班。今天算是在现公司工作交接的最后时段。在这家公司干了接近一年&#xff…

论文阅读(十六):Deep Residual Learning for Image Recognition

文章目录 1.介绍2.基本原理3.两种残差块4.网络结构 论文&#xff1a;Deep Residual Learning for Image Recognition   论文链接&#xff1a;Deep Residual Learning for Image Recognition   代码链接&#xff1a;Github 1.介绍 在ResNet网络提出之前&#xff0c;传统的卷…

linux 开发机与测试机建立 ssh 隧道

1、开启手机的 tcp 端口 ## 例如 adb tcpip 55552、将 windows 电脑的与手机端口进行映射 ### 例如 adb forward tcp:55555 tcp:55553、打通和 linux 主机的隧道 ssh -R <remote-port>:127.0.0.1:<local-port> userremote-host -N### 例如 ssh -R 55555:127.0.…

详解tcpdump

tcpdump 是一个强大的命令行网络分析工具&#xff0c;用于抓取和分析网络流量。下面是 tcpdump 的常用参数及其详细说明&#xff0c;包含抓取所有网络接口的方法和 -S 参数的作用。 基础参数 -i <interface> 指定要监听的网络接口。如果你希望抓取所有接口的流量&#x…

【MySQL】入门篇—SQL基础:数据查询语言(DQL):复杂的SELECT语句

在实际应用中&#xff0c;复杂的SELECT语句可以帮助我们从多个表中提取相关信息&#xff0c;进行数据分析&#xff0c;生成报告&#xff0c;甚至进行数据挖掘。 掌握复杂的SELECT语句对于数据分析师、数据库管理员和开发者来说是必不可少的技能。 应用场景&#xff1a; 多表查…

Android 中获取当前 CPU 频率和占用率

最近在优化 App 的性能&#xff0c;需要获取当前 CPU视频频率和占用率&#xff0c;通过查询资料&#xff0c;大致思路如下&#xff1a; 目前没有标准的 API 来获取 CPU 的使用频率&#xff0c;只能通过读取指定 CPU 文件获取当前 CPU 频率&#xff0c;在某些机器或者特定版本中…

STM32 独立看门狗和窗口看门狗区别

文章目录 1. 时钟源不同独立看门狗&#xff08;IWDG&#xff09;时钟源&#xff1a;特点&#xff1a; 窗口看门狗&#xff08;WWDG&#xff09;时钟源&#xff1a;特点&#xff1a; 2. 中断机制不同独立看门狗&#xff08;IWDG&#xff09;中断机制&#xff1a; 窗口看门狗&…

如何快速部署一套智能化openGauss测试环境

一、openGauss介绍 openGauss是一款开源关系型数据库管理系统&#xff0c;采用木兰宽松许可证v2发行&#xff0c;允许用户自由地复制、使用、修改和分发软件。openGauss内核深度融合了华为在数据库领域多年的研发经验&#xff0c;结合企业级场景需求&#xff0c;持续构建竞争力…

STM32 ADC介绍

文章目录 STM32 ADC介绍一、ADC的基本概念二、STM32 ADC的主要特点高分辨率&#xff1a;多通道输入&#xff1a;多种工作模式&#xff1a;内置温度传感器和参考电压&#xff1a; 三、ADC的工作原理采样阶段&#xff1a;转换阶段&#xff1a;数据存储&#xff1a; 四、ADC的配置…

集合相关:asList()和subList()方法的作用?

1.asList()方法 Arrays.asList(T... a)返回一个固定大小的列表&#xff0c;这个返回的列表的底层实现是一个final修饰的数组&#xff0c;其引用关系不能发生变化&#xff0c;并且它的大小也是固定的&#xff0c;可以修改和读取里面的元素值&#xff0c;但是不能添加或删除元素。…

基于SpringBoot+Vue+uniapp微信小程序的婚庆摄影小程序的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

在docker的容器内如何查看Ubuntu系统版本

文章目录 写在前面一、问题描述二、解决方法参考链接 写在前面 自己的测试环境&#xff1a; docker 一、问题描述 由于 lsb_release -a 只能查看自己电脑&#xff08;宿主机&#xff09;的系统版本&#xff0c;如果在docker的容器内又应该如何查看Ubuntu系统版本呢&#xff…

vue3导出,下载,预览,上传

1.导出 try {let response null;response await exportCheckAmendment({type: 2,reportId: row.id});if (response.size < 100) return ElMessage.warning("暂无修订件");// 处理请求返回的文件流const content response as BlobPart;const blob new Blob([co…

机器学习—学习率的选择

如果你选择适当的学习率&#xff0c;你的学习算法将运行得更好&#xff0c;如果太小&#xff0c;它会跑得很慢&#xff0c;如果太大&#xff0c;它甚至可能不会收敛&#xff0c;那么如何为模型选择一个好的学习率呢&#xff1f; 如果绘制多次迭代的成本&#xff0c;注意到成本…

vue3中用axios请求怎么添加cookie

在 Vue 3 中使用 axios 发起请求时&#xff0c;可以通过配置 axios 的请求选项来携带 Cookies。具体来说&#xff0c;确保跨域请求时&#xff0c;设置 withCredentials: true&#xff0c;以便发送和接收 Cookies。 1. Axios 配置携带 Cookie 首先确保你在 axios 请求中设置了…