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

news2024/11/13 20:23:33

  

主要代码是在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-select
      v-model="name"
      size="medium"
      ref="select"
      clearable
      filterable
      multiple
      placeholder="请选择"
      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">
          <span
            style="margin: 0 5px; font-size: 14px; color: #409eff"
            v-if="!item.isHandle"
            @click.stop="isEditBtn(item, true)"
            >编辑</span
          >
          <span
            style="margin: 0 5px; font-size: 14px; color: #409eff"
            v-if="item.isHandle"
            @click.stop="isEditBtn(item, false)"
            >保存</span
          >
          <span
            style="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.name
      item.isHandle = false
    },

    visibleChange (visible) {
      // 下拉框显示隐藏
      if (visible) {
        const ref = this.$refs.select
        console.log('ref:', ref)
        let popper = ref.$refs.popper
        console.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.coloradmin.cn/o/1645737.html

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

相关文章

【哈希表】Leetcode 14. 最长公共前缀

题目讲解 14. 最长公共前缀 算法讲解 我们使用当前第一个字符串中的与后面的字符串作比较&#xff0c;如果第一个字符串中的字符没有出现在后面的字符串中&#xff0c;我们就直接返回&#xff1b;反之当容器中的所有字符串都遍历完成&#xff0c;说明所有的字符串都在该位置…

Java二维码、条码生成及解码工具类

功能描述 生成二维码、条码解码使用谷歌的zxing依赖 引入依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.4.1</version> </dependency><dependency><groupId>…

pandas学习笔记11

DataFrame结构 DataFrame 一个表格型的数据结构&#xff0c;既有行标签&#xff08;index&#xff09;&#xff0c;又有列标签&#xff08;columns&#xff09;&#xff0c;它也被称异构数据表&#xff0c;所谓异构&#xff0c;指的是表格中每列的数据类型可以不同&#xff0c;…

解决jar包中没有主清单目录的问题

文章目录 解决jar包中没有主清单目录的问题问题描述环境描述方法一 | 阿里巴巴构造器的通用解决方案方式二 | 指定MANIFEST.MF路径 解决jar包中没有主清单目录的问题 问题描述 很简单可能很多人都遇到过&#xff0c;maven项目打成jar包后执行报错&#xff1a;jar包中没有主清单…

Python_4-对象序列化操作

文章目录 Python中对象数据持久化操作模块学习笔记marshal模块优点缺点使用示例保存数据到文件从文件读取数据 shelve模块优点缺点使用示例保存数据到文件从文件读取数据 总结 Python中对象数据持久化操作模块学习笔记 在Python中&#xff0c;数据持久化指的是将程序中的数据结…

【go项目01_学习记录04】

学习记录 1 集成 Gorilla Mux1.1 为什么不选择 HttpRouter&#xff1f;1.2 安装 gorilla/mux1.3 使用 gorilla/mux1.4 迁移到 Gorilla Mux1.4.1 新增 homeHandler1.4.2 指定 Methods () 来区分请求方法1.4.3 请求路径参数和正则匹配1.4.4 命名路由与链接生成 1 集成 Gorilla Mu…

零基础入门学习Python第二阶01生成式(推导式),数据结构

Python语言进阶 重要知识点 生成式&#xff08;推导式&#xff09;的用法 prices {AAPL: 191.88,GOOG: 1186.96,IBM: 149.24,ORCL: 48.44,ACN: 166.89,FB: 208.09,SYMC: 21.29}# 用股票价格大于100元的股票构造一个新的字典prices2 {key: value for key, value in prices.i…

DS二叉搜索树

前言 我们在数据结构初阶专栏已经对二叉树进行了介绍并用C语言做了实现&#xff0c;但是当时没有对二叉搜树进行介绍&#xff0c;而是把他放到数据结构进阶构专栏的第一期来介绍&#xff0c;原因是后面的map和set&#xff08;红黑树&#xff09;是基于搜索树的&#xff0c;这里…

LIUNX系统编程:进程池的实现

1.什么是进程池 每一个可执行程序&#xff0c;在被执行前都要转化为进程&#xff0c;操作系统都要为其创建PCB&#xff0c;地址空间&#xff0c;页表&#xff0c;构建映射关系&#xff0c;进程池就是创建进程时&#xff0c;创建很多个进程&#xff0c;如果要执行程序&#xff…

ROS仿真小车与SLAM

ROS仿真小车与SLAM ROS中机器小车的仿真实验一、建立模型1.创建功能包导入依赖&#xff1a;创建urdf,launch文件&#xff1a; 2.可视化 二、添加雷达传感器1.编写xacro文件2.集成launch文件3.添加摄像头和雷达传感器my_camera.urdf.xacro文件&#xff1a;my_laser.urdf.xacro文…

Retrofit源码解析

整体概述 这个是我看完Retrofit的源码后&#xff0c;站在一个高的维度俯瞰整个Retrofit的架构得到的结论。 Retrofit的出现就是对OKHttp做了一个二次封装&#xff0c;为什么要封装&#xff1f;我认为核心目的就是让使用更加的方便。都对哪里进行了封装&#xff1f; 封装了请求…

从一到无穷大 #25 DataFusion:可嵌入,可扩展的模块化工业级计算引擎实现

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言架构总览与可扩展性Catalog and Data SourcesFront End逻辑计划与逻辑计划优化器…

c3 笔记6 认识css样式表

<link>与import应该如何选择?事实上&#xff0c;使用link与import链接外部样式文件的效果看起来是一样的&#xff0c;区别在于<link>是HTML标记而import属于CSS语法。<link>标记有rel、type与href属性&#xff0c;可以指定CSS样式表的名称&#xff0c;这样就…

深度学习之DCGAN

目录 须知 转置卷积 DCGAN 什么是DCGAN 生成器代码 判别器代码 补充知识 LeakyReLU&#xff08;x&#xff09; torch.nn.Dropout torch.nn.Dropout2d DCGAN完整代码 运行结果 图形显示 须知 在讲解DCGAN之前我们首先要了解转置卷积和GAN 关于GAN在这片博客中已经很…

攻防世界-NewsCenter

题目信息 分析过程 题目打开是有个输入框可以用来输入搜索信息&#xff0c;初步判断是个sql注入的题目。接下来判断能否进行sql注入&#xff1a; 输入 hi&#xff0c;有搜索结果&#xff0c;如下图: 输入hi’,无结果&#xff0c;如下图&#xff1a; 初步判定是hi‘后面还有单引…

【Axure高保真原型】动态伸缩信息架构图

今天和大家分享动态伸缩信息架构图的原型模板&#xff0c;我们可以通过点击加减按钮来展开或收起子内容&#xff0c;具体效果可以点击下方视频观看或者打开预览地址来体验 【原型效果】 【Axure高保真原型】动态伸缩信息架构图 【原型预览含下载地址】 https://axhub.im/ax9/…

Python批量修改图片文件名中的指定名称

批量处理图像时&#xff0c;图片名有时需要统一&#xff0c;本教程仅针对图片中名如&#xff1a;0001x4.png&#xff0c;批量将图片名中的x4去除&#xff0c;只留下0001.png的情况。 如果想要按照原图片顺序批量修改图片名&#xff0c;参考其它博文&#xff1a;按照原顺序批量…

SpringBoot整合rabbitmq使用案例

RocketMQ&#xff08;二十四&#xff09;整合SpringBoot SpringBoot整合rabbitmq使用案例 一 SpringBoot整合RocketMQ实现消息发送和接收消息生产者1&#xff09;添加依赖2&#xff09;配置文件3&#xff09;启动类4&#xff09;测试类 消息消费者1&#xff09;添加依赖2&…

Sy9-dhcp/dns服务配置

前言、 课程需要&#xff08;进入服务器综合配置使用阶段了&#xff09;&#xff0c;这里还是沿用桌面版的ubuntu来配置dhcp和dns&#xff0c;这里updated了新的版本。2024.5 server端环境&#xff1a; Win11VMS&#xff1a;192.168.105.1192.168.105.128 &#xff08;ubuntu…

AI热潮开始退去,财务压力迫使多家硅谷明星初创公司选择退出

曾风光无限的Stability AI已重组并削减业务规模&#xff0c;Inflection AI更是关闭业务并基本并入微软。 5月4日消息&#xff0c;国外媒体日前撰文指出&#xff0c;人工智能的热潮已开始逐渐褪去。初创公司想要同微软、谷歌等科技巨头在人工智能领域一决高下&#xff0c;门槛已…