el-select 点击按钮滚动到选择框顶部

  

主要代码是在visibleChange    在这个 popper 里面找到  .el-select-dropdown__list

   let popper = ref.$refs.popper

   const ref = this.$refs.select 

   let dom = popper.querySelector('.el-select-dropdown__list')

            setTimeout(() => {

              dom.scrollIntoView()

            }, 800)

<template><div class="SetTags"><strong>标签:</strong><el-selectv-model="name"size="medium"ref="select"clearablefilterablemultipleplaceholder="请选择"style="width: 370px"@visible-change="visibleChange"@change="selectChange"><el-option :label="item.name" :value="item.id" v-for="(item, index) in selectList" :key="index"><!-- :disabled="!item.id" --><div style="float: left"><span v-if="!item.isHandle">{{ item.name }}</span><span v-else @click.stop.prevent="() => {}"><el-input style="width: 120px" size="mini" maxlength="15" clearable v-model.lazy="item.name2"></el-input></span></div><div style="float: right; margin-right: 20px"><spanstyle="margin: 0 5px; font-size: 14px; color: #409eff"v-if="!item.isHandle"@click.stop="isEditBtn(item, true)">编辑</span><spanstyle="margin: 0 5px; font-size: 14px; color: #409eff"v-if="item.isHandle"@click.stop="isEditBtn(item, false)">保存</span><spanstyle="margin: 0 5px; font-size: 14px; color: #409eff"v-if="item.isHandle"@click.stop="cancelBtn(item)">取消</span></div></el-option></el-select></div>
</template><script>
import request from '@/utils/request'
export default {components: {},data () {return {name: [],selectList: []}},computed: {},watch: {},created () {},mounted () {},methods: {async getSelectList () {const res = await request({url: '/op/tmsOrder/label/dropdown',method: 'get'})res.data.forEach((item) => {item.name2 = JSON.parse(JSON.stringify(item.name))item.isHandle = false})this.selectList = res.data},handleSubmit () {return new Promise((resolve, reject) => {// if (this.name.length === 0) {//   this.$message.error('请选择标签名称')//   reject(new Error('数据校验失败,请检查'))// }resolve(this.name)})},handleReset () {this.name = []},// true 编辑  false 保存async isEditBtn (item, bol) {let apiUrl = '/op/tmsOrder/save/label'if (bol) {item.isHandle = true} else {// 新增if (!item.id) {await request({url: apiUrl,method: 'post',data: {name: item.name2}})this.$message.success('新增成功')this.getSelectList()} else {// 修改await request({url: apiUrl,method: 'post',data: {name: item.name2,id: item.id}})}this.$message.success('保存成功')this.getSelectList()}},cancelBtn (item) {if (!item.name2 && !item.id) return this.selectList.splice(0, 1)item.name2 = item.nameitem.isHandle = false},visibleChange (visible) {// 下拉框显示隐藏if (visible) {const ref = this.$refs.selectconsole.log('ref:', ref)let popper = ref.$refs.popperconsole.log('popper:', popper)if (popper.$el) popper = popper.$el// 判断是否有添加按钮if (!Array.from(popper.children).some((v) => v.className === 'btn-box')) {const el = document.createElement('div')el.className = 'btn-box'el.innerHTML = `<a class="btn" style="font-size:14px;display:block;line-height:38px;text-align:center;"><i class="el-icon-plus"></i>添加其他标签</a>`popper.appendChild(el)el.onclick = () => {let dom = popper.querySelector('.el-select-dropdown__list')setTimeout(() => {dom.scrollIntoView()}, 800)// 初始情况 没有数据if (this.selectList.length === 0) {return this.selectList.unshift({ name: '', name2: '', id: '', isHandle: true })}if (this.selectList[0].name === '') {this.$message.error('请回到选择列表顶部,填写第一项内容')return}this.selectList.unshift({ name: '', name2: '', id: '', isHandle: true })}}} else {if (this.selectList.length > 0 && !this.selectList[0].id) {this.selectList.shift()}}this.selectList.forEach((item) => {item.isHandle = false})},selectChange (e) {let bol = e.some((item) => item == '' || item == null || item == undefined)this.name = this.name.filter((item) => item !== '')if (bol) return this.$message.error('此项不能进行选中操作,请填写内容后保存此项后重试!')}}
}
</script>
<style lang="scss" scoped>
.SetTags {display: flex;justify-content: center;align-items: center;padding-top: 40px;
}
</style>

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

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

相关文章

[极客大挑战 2019]PHP

1.通过目录扫描找到它的备份文件&#xff0c;这里的备份文件是它的源码。 2.源码当中涉及到的关键点就是魔术函数以及序列化与反序列化。 我们提交的select参数会被进行反序列化&#xff0c;我们要构造符合输出flag条件的序列化数据。 但是&#xff0c;这里要注意的就是我们提…

【Proteus】LED呼吸灯 直流电机调速

1.LED呼吸灯 #include <REGX51.H> sbit LEDP2^0; void delay(unsigned int t) {while(t--); } void main() {unsigned char time,i;while(1){for(time0;time<100;time){for(i0;i<20;i){LED0;delay(time);LED1;delay(100-time);}}for(time100;time>0;time--){fo…

Windows端之Python3.9及以上高版本工程打包得到的exe逆向工程解包得到pyc文件进而得到py文件的流程实现

参考来自 【python逆向 pyc反编译】python逆向全版本通杀_python反编译pyc-CSDN博客https://blog.csdn.net/zjjcxy_long/article/details/127346296Pyinstaller打包的exe之一键反编译py脚本与防反编译_pyinstaller防止反编译-CSDN博客https://blog.csdn.net/as604049322/artic…

大模型微调实战之强化学习 贝尔曼方程及价值函数(五)

大模型微调实战之强化学习 贝尔曼方程及价值函数&#xff08;五&#xff09; 现在&#xff0c; 看一下状态-动作值函数的示意图&#xff1a; 这个图表示假设首先采取一些行动(a)。因此&#xff0c;由于动作&#xff08;a&#xff09;&#xff0c;代理可能会被环境转换到这些状…

如何构建进攻性的网络安全防护策略

进攻性安全&#xff08;Offensive security&#xff09;是指一系列主动安全策略&#xff0c;这些策略与恶意行为者在现实世界的攻击中使用的策略相同&#xff0c;区别在于其目的是加强而非损害网络安全。常见的进攻性安全方法包括红队、渗透测试和漏洞评估。 进攻性安全行动通…

OpenCV4.8 VS2019 MFC编程出现的诡异现象

OpenCV4.8及OpenCV4.4 VS2019MFC编程在调用imred&#xff08;&#xff09;函数时&#xff0c;debug X64试运行没问题。 release X64试运行时出现下面错误。 void CEasyPictureDlg::OnBnClickedOpen() {CFileDialog fdlg(TRUE, NULL, 0, OFN_HIDEREADONLY | OFN_OVERWRITEPROMP…

基于SkyEye运行Android——应用最为广泛的移动设备操作系统

01.Android简介 Android&#xff08;安卓&#xff09;是一种基于Linux内核&#xff08;不包含GNU组件&#xff09;的开源操作系统&#xff0c;最初由安迪鲁宾开发&#xff0c;主要支持手机。2005年8月由Google收购注资&#xff1b;2007年11月&#xff0c;Google与84家硬件制造…

【深度学习】网络安全,SQL注入识别,SQL注入检测,基于深度学习的sql注入语句识别,数据集,代码

文章目录 一、 什么是sql注入二、 sql注入的例子三、 深度学习模型3.1. SQL注入识别任务3.2. 使用全连接神经网络来做分类3.3. 使用bert来做sql语句分类 四、 深度学习模型的算法推理和部署五、代码获取 一、 什么是sql注入 SQL注入是一种常见的网络安全漏洞&#xff0c;它允许…

玩comfyui踩过的坑之使用ComfyUI_Custom_NODES_ALEKPET翻译组件问题

环境&#xff1a; 秋叶安装包&#xff0c;安装ComfyUI_Custom_NODES_ALEKPET组件或者直接下载网盘中的包&#xff0c;直接解压包到comfyui根目录/custom_nodes/&#xff0c;重启后&#xff0c;按指导文件操作。 注意&#xff1a;网盘指导包中有配置好的流程json文件&#xff0…

ue引擎游戏开发笔记(35)——为射击添加轨道,并显示落点

1.需求分析&#xff1a; 我们只添加了开枪特效&#xff0c;事实上并没有实际的效果产生例如弹痕&#xff0c;落点等等。所以逐步实现射击的完整化&#xff0c;先从实现落点开始。 2.操作实现&#xff1a; 1.思路&#xff1a;可以这样理解&#xff0c;每次射击的过程是一次由摄…

汽车灯罩一般都是用什么材质做的?汽车车灯的灯罩如果破损破裂破洞了要怎么修复?

汽车灯罩一般都是用什么材质做的&#xff1f; 汽车灯罩一般使用的主要材质是聚碳酸酯&#xff08;PC&#xff09;和丙烯酸酯&#xff08;PMMA&#xff09;这两种塑料。这两种材料具有良好的透明性、耐候性和耐冲击性&#xff0c;因此非常适合用于汽车灯罩的制造。 聚碳酸酯&am…

鸿蒙内核源码分析(互斥锁篇) | 互斥锁比自旋锁丰满多了

内核中哪些地方会用到互斥锁?看图: 图中是内核有关模块对互斥锁初始化,有文件,有内存,用消息队列等等,使用面非常的广.其实在给内核源码加注的过程中,会看到大量的自旋锁和互斥锁,它们的存在有序的保证了内核和应用程序的正常运行.是非常基础和重要的功能. 概述 自旋锁 和…

全面的Partisia Blockchain 生态 4 月市场进展解读

Partisia Blockchain 是一个以高迸发、隐私、高度可互操作性、可拓展为特性的 Layer1 网络。通过将 MPC 技术方案引入到区块链系统中&#xff0c;以零知识证明&#xff08;ZK&#xff09;技术和多方计算&#xff08;MPC&#xff09;为基础&#xff0c;共同保障在不影响网络完整…

通过ESXi主机和专业工具导出或导入虚拟机

关于导出虚拟机的用户场景 导出ESXi虚拟机是VMware内置功能之一&#xff0c;可用于数据迁移或作为ESXi备份解决方案。通常情况下&#xff0c;您可以将ESXi中的虚拟机导出为OVF模板&#xff0c;该模板可捕获虚拟机或虚拟设备的状态并存储在一个自包含的包中&#xff0c;其中磁盘…

一款开源高性能AI应用框架

前言 LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用&#xff0c;旨在提供一个 AI 生产力平台&#xff0c;使用户能够与 AI 进行自然语言交互。 LobeChat应用架构 LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作&a…

微服务架构中的挑战及应对方式:Outbox 模式

使用 Outbox 模式保持微服务数据一致性 在一个由许多小型服务组成的系统中保持数据一致性是困难的&#xff0c;因为它们分散在各处。以下是一些常见问题以及如何处理它们的方法&#xff1a;当服务发送消息时&#xff0c;同时更新数据库和发送消息是棘手的问题。 在微服务中发出…

PCIe下一代线缆标准CopprLink发布

作为业界广泛采用的高速串行点对点互联标准&#xff0c;PCIe自诞生以来历经多次迭代升级&#xff0c;现已成为CPU、GPU、FPGA、SSD等计算设备间不可或缺的互连桥梁。PCIe 7.0标准更是将数据传输速率提升至令人惊叹的32 GB/s&#xff08;每通道&#xff09;。 然而&#xff0c;面…

Leetcode—387. 字符串中的第一个唯一字符【简单】

2024每日刷题&#xff08;127&#xff09; Leetcode—387. 字符串中的第一个唯一字符 实现代码 class Solution { public:int firstUniqChar(string s) {int count[26] {0};for(char c: s) {count[c - a];}for(int i 0; i < s.length(); i) {if(count[s[i] - a] 1) {re…

C++贪心算法

关于string的系统函数&#xff01; &#xff08;注&#xff1a;以下函数只可用于string&#xff0c;不适用其他类型的变量&#xff09; ① a.size(); 这个系统函数是用来获取这个string变量的长度的&#xff0c;我们通常会新建一个变量来保存他&#xff0c;以便之后使用。 …

《武林秘籍》——闪侠惠递如何让消费者寄快递更安心!

现如今&#xff0c;网上下单寄快递的便利性让众多人享受到了电商物流飞速发展带来的红利性。今天小编直接介绍一款寄快递特别省钱的利器&#xff0c;就是利用闪侠惠递来寄快递。闪侠惠递寄快递&#xff0c;真正的实现了便宜寄快递发物流的便捷性&#xff0c;开创了低价发快递的…