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.mzph.cn/diannao/8555.shtml

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

相关文章

vue3+vite+js 使用pinia -- vue2 vuex的plus版

先交代下基础版本&#xff1a; “node”&#xff1a;“V16.14.1” “vue”: “^3.4.21” “vite”: “^5.2.0” 接入状态store 即 vuex 呃(⊙﹏⊙)vuex这里可以略过了&#xff0c;我在研究完后&#xff0c;才发现vue3出来个pinia&#xff0c;是vuex的升级&#xff0c;体积更小…

JavaScript 数组方法详解

JavaScript数组方法详解 在JavaScript中&#xff0c;数组&#xff08;Array&#xff09;是一种用于存储多个有序值的数据结构。为了方便开发者高效地操作数组&#xff0c;JavaScript提供了一系列内置的方法。本文将详细介绍这些常用的数组方法&#xff0c;帮助读者更好地理解和…

【算法刷题day47】Leetcode:198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

文章目录 Leetcode 198. 打家劫舍解题思路代码总结 Leetcode 213. 打家劫舍 II解题思路代码总结 Leetcode 337. 打家劫舍 III解题思路代码总结 草稿图网站 java的Deque Leetcode 198. 打家劫舍 题目&#xff1a;198. 打家劫舍 解析&#xff1a;代码随想录解析 解题思路 偷&am…

Python 正则表达式 re.findall()

Python re.findall 正文示例一示例二示例三 正文 调用方法&#xff1a; re.findall(pattern, string, flags0)用法说明&#xff1a; 扫描整个 字符串&#xff0c;找到所有满足匹配样式的字符&#xff0c;将它们集合在一起以列表形式返回。其中这个返回的列表包含空的结果(没有…

CSF(Cloth Simulation Filter)点云地面点滤波

CSF[Cloth Simulation Filter]点云地面点滤波 0.引言1.布料模拟2.修改布料模拟3.布料滤波4.CSF总体过程 0.引言 code 基本原理&#xff1a;原始点云被倒置过来&#xff0c;然后⼀块布从上⽅掉落到倒置的表⾯。通过分析布的节点与相应的LIDAR点之间的相互作⽤&#xff0c;可以确…

2024年华为OD机试真题-数的分解-(C++)-OD统一考试(C卷D卷)

题目描述: 给定一个正整数n,如果能够分解为m(m > 1)个连续正整数之和,请输出所有分解中,m最小的分解。 如果给定整数无法分解为连续正整数,则输出字符串"N"。 输入描述: 输入数据为一整数,范围为(1, 2^30] 输出描述: 比如输入为: 21 输出: 21=10+11 补…

C++中使用Multimap和Vector管理和展示数据

一&#xff1a; 在本文中&#xff0c;我们将探讨如何在C中使用vector和multimap容器来管理一个简单的员工数据系统。我们将创建一个员工类&#xff0c;随机生成员工数据&#xff0c;将员工分组&#xff0c;并展示各组员工的详细信息。此示例展示了C标准模板库&#xff08;STL&…

【中级软件设计师】上午题15-计算机网络

上午题15-计算机网络 1 网络设备2 协议簇3 TCP和UDP4 SMTP和POP35 ARP和RARP6 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;7 URL8 浏览器9 IP地址和子网划分10 IPv611 Windows命令12 路由器 1 网络设备 物理层设备&#xff1a;中继器、集线器&#xff0…

Mysql基础(五)外键约束

一 外键 激励&#xff1a; 每天进步一点点即可 ① 思考 1、在MySQL中,我们知道主键 PRIMARY KEY的主要作用是唯一区分表中的各个行 [记录];思考&#xff1a;但是对于外键 foreign key比较陌生? 那么外键作用以及限制条件和目的呢? ② 外键的定义 1、外键是某个表 A中…

图像处理之SVD检测显示屏缺陷(C++)

图像处理之SVD检测显示屏缺陷&#xff08;C&#xff09; 文章目录 图像处理之SVD检测显示屏缺陷&#xff08;C&#xff09;前言一、SVD算法简介二、代码实现总结 前言 显示屏缺陷检测是机器视觉领域的一处较广泛的应用场景&#xff0c;显示屏主要有LCD和OLED&#xff0c;缺陷类…

基于java,SpringBoot和Vue的智慧校园在线考试留言讨论系统设计

摘要 基于Java, SpringBoot和Vue的智慧校园在线考试留言讨论系统是一个为现代教育需求定制的Web应用&#xff0c;它结合了最新的前后端技术来提供一个互动性强、用户友好的学习和交流平台。该系统旨在通过提供实时留言和讨论功能&#xff0c;增进学生间的互动以及师生之间的沟…

算法打卡day44

今日任务&#xff1a; 1&#xff09;309.最佳买卖股票时机含冷冻期 2&#xff09;714.买卖股票的最佳时机含手续费 3&#xff09;复习day19 309.最佳买卖股票时机含冷冻期 题目链接&#xff1a;309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 给定一…

快来看 2024年ICLR杰出论文奖揭晓啦 值得关注

会议之眼 快讯 在人工智能的浪潮中&#xff0c;国际学习表征会议&#xff08;ICLR&#xff09;无疑是引领学术前沿的重要会议之一&#xff01;ICLR是深度学习领域的顶级会议之一&#xff0c;由深度学习领域的两位巨头Yoshua Bengio和Yann LeCun于2013年创办。 2024年5月6日&a…

NSSCTF中的web

目录 [第五空间 2021]WebFTP [LitCTF 2023]PHP是世界上最好的语言&#xff01;&#xff01; [SWPUCTF 2021 新生赛]PseudoProtocols [LitCTF 2023]导弹迷踪 [NISACTF 2022]easyssrf [第五空间 2021]WebFTP 1.进入页面&#xff0c;发现是登录页面&#xff0c;想到 弱口令&…

反射技术介绍以及底层逻辑使用

反射概述&#xff1a; 1.反射是指对于任何一个Class类&#xff0c;在"运行的时候"都可以直接得到这个类全部成分。 2.在运行时,可以直接得到这个类的构造器对象&#xff1a;Constructor 3.在运行时,可以直接得到这个类的成员变量对象&#xff1a;Field 4.在运行时,可…

大模型微调之 在亚马逊AWS上实战LlaMA案例(六)

大模型微调之 在亚马逊AWS上实战LlaMA案例&#xff08;六&#xff09; 通过 SageMaker Python SDK 进行微调Llama2 可以使用 SageMaker Python SDK 微调 Llama 2 模型。以下是在数据集上微调 Llama 2 7B 的示例代码&#xff1a; import os import boto3 from sagemaker.sessi…

【RAG 博客】Small-to-Big Retrieval

Blog&#xff1a;Advanced RAG 01: Small-to-Big Retrieval ⭐⭐⭐⭐ Code&#xff1a;https://colab.research.google.com/github/sophiamyang/demos/blob/main/advanced_rag_small_to_big.ipynb Small-to-Big Retrieval 技术试图解决这样一个矛盾&#xff1a;更大的 chunk 可…

28 JavaScript学习: 代码规范

代码规范通常包括以下几个方面: 变量和函数的命名规则空格&#xff0c;缩进&#xff0c;注释的使用规则。其他常用规范…… 变量名 在编写JavaScript代码时&#xff0c;遵守良好的变量命名规范是非常重要的&#xff0c;这可以增加代码的可读性和可维护性。以下是一些常见的…

iOS ------ 内存五大分区

1&#xff0c;内存的概念&#xff1a; 虚拟内存&#xff08;Virtual Memory&#xff09;&#xff1a;虚拟内存是操作系统提供的一种机制&#xff0c;它使得应用程序能够访问超出物理内存限制的内存空间。虚拟内存将应用程序的内存地址空间分割成固定大小的页面&#xff08;Pag…

18.Docker学习

1.Docker应用场景 Docker借鉴了标准集装箱的概念。标准集装箱将货物运往世界各地&#xff0c;Docker&#xff08;模板&#xff09;将软件运往各个环境&#xff08;测试环境和生产环境拉取镜像&#xff08;实例&#xff09;&#xff09;&#xff0c;相当于是一个模子刻出来的 …