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-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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Debian mariadb 10.11设定表名 大小写不敏感方法

目录 问题表现&#xff1a;应用中查询 表提示 表不存在 处理步骤&#xff1a; 1、查询表名大小写敏感情况&#xff1a; show global variables like %case%; 2、修改mariadb 配置设置大小写 不敏感 mysql 配置大小写不敏感 mariadb 10.11设置表名大小写不敏感 /etc/mysq…

【项目部署】手把手带你从零部署项目:宝塔 + uwsgi + Django + 腾讯云 + Websocket

1. 前言 哈喽&#xff0c;大家好&#xff0c;我是jiaoxingk。今天带来的是有关Django项目部署的教程。 当我们完成了一个项目作品之后&#xff0c;我们肯定会迫不及待的就准备上线部署啦&#xff0c; 这篇教程将带你从服务器的配置选购&#xff0c;再通过安装宝塔的形式进行项目…

【一刷《剑指Offer》】面试题 15:链表中倒数第 k 个结点

力扣对应题目链接&#xff1a;LCR 140. 训练计划 II - 力扣&#xff08;LeetCode&#xff09; 核心考点 &#xff1a;链表&#xff0c;前后指针的使用&#xff0c;边界条件检测。 一、《剑指Offer》内容 二、分析问题 较优解题思路&#xff1a; 题目中的链表是单链表&#xff0…

数据库SQL语言实战(七)

前言 这次的有一点点难~~~~~我也写了好久 练习题 题目一 在学生表pub.student中统计名字&#xff08;姓名的第一位是姓氏&#xff0c;其余为名字&#xff0c;不考虑复姓&#xff09;的使用的频率&#xff0c;将统计结果放入表test5_01中 create table test5_01(First_name…

Mars3d实现用一个button控制一个map.control的显示与隐藏

原生js,想做一个button,控制比如compass的显示与隐藏 点一下显示 再次单击的时候就隐藏掉 写了一个function控制显示隐藏 function addCompass(){ if(compass.showtrue) { compass.showfalse; } else{ compass.showtrue; } } 功能示例(Vue版) | Mars3D三维可视化平台 | 火星…

corCTF2023 -- kcipher

前言 本次仅仅是通过 modprobe_path 拿 flag&#xff0c;但是 modprobe_path 是可以提权的&#xff08;&#xff1a;只需要把 /etc/passwd 的权限修改为 777 即可 这里存在 kmalloc-96 大小的 UAF/Double free 所以其实利用方式挺多的~~~但是这里就不深究了 题目分析 内核版…

实测好评!微信自动回复消息神器!高效沟通拿捏住!

随着企业规模的扩大和客户数量的增加&#xff0c;有效管理和回复每一条消息变得越来越具有挑战性。今天&#xff0c;就给大家分享一个高效的自动回复消息神器——个微管理系统&#xff0c;让你能够轻松应对各种沟通需求。 1、自动通过好友&#xff0c;提高沟通效率 每当有新的…

Shell脚本编写-定时清空文件内容,定时记录文件内容大小

find命令 – 根据路径和条件搜索指定文件 – Linux命令大全(手册)find命令的功能是根据给定的路径和条件查找相关文件或目录&#xff0c;其参数灵活方便&#xff0c;且支持正则表达式&#xff0c;结合管道符后能够实现更加复杂的功能&#xff0c;是Linux系统运维人员必须掌握的…

基于现有语言大模型,定制“人人AI气象”公众号天气助手

最近&#xff0c;月之暗面的Kimi大模型非常受欢迎&#xff0c;尝试用了moonshot(128K)基座模型&#xff0c;通过调用各种公开渠道的API&#xff0c;简易实现了一个天气助手&#xff0c;可以回答天气相关的基础概念、原理、应用等方面的问题&#xff0c;同时也可调用多个插件获取…

ComfyUI搭建和注意事项for WIN[笔记]

下载ComfyUI(GitHub - comfyanonymous/ComfyUI: The most powerful and modular stable diffusion GUI, api and backend with a graph/nodes interface.) 从源码上搭建比较麻烦&#xff0c;一般不推荐&#xff0c;所以跑到release里面找一个下载。我的显卡是GeFore GTX 1050 …

【ITK统计】第一期 分类器

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享ITK中的分类器及其使用情况,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 在统计分…

私域流量引流方式有哪些?

私域流量引流的方法无非是营销渠道投放、各平台KOL投放、自有自媒体平台账号内容引流、线下引流、老客户转介绍裂变等几个方面&#xff0c;下面对各种不同方法进行简单介绍。 1、营销渠道投放&#xff1a;选择广点通、粉丝通、某些app的信息流和dou等大平台自带的推广渠道工具…

JavaScript中的事件模型

JavaScript中的事件模型分为&#xff1a;事件和事件流、原始事件、标准事件和IE事件。 事件与事件流 JavaScript中的事件&#xff0c;可以理解为HTML文档或者浏览器中发生的一种交互操作&#xff0c;让网页有互动的功能。常见的事件就是加载事件、鼠标事件和自定义事件。 因…

JavaScript中Math函数与舍入

立方根 console.log(Math.sqrt(25)); //数学方式25平方根 console.log(25 ** (1 / 2)); //25的0.5次方 console.log(8 ** (1 / 3)); //8的1/3次方计算最大最小值 console.log(Math.max(1, 5, 88, 22, 132)); //返回最大值 console.log(Math.max(1, 5, 88, 22, 132)); //…

STM32CubeMX学习笔记29---FreeRTOS任务通知

一、简介 1 、基本概念 FreeRTOS 从 V8.2.0 版本开始提供任务通知这个功能&#xff0c;每个任务都有 一个 32 位 的通知值&#xff0c;在大多数情况下&#xff0c;任务通知可以 替代二值信号量、计数信号量、事件组&#xff0c;也可以替代长度为 1 的队列&#xff08;可以保存…

wordpress外贸建站公司歪建站新版网站上线

wordpress外贸建站公司 歪猫建站 歪猫WordPress外贸建站&#xff0c;专业从事WordPress多语言外贸小语种网站建设与外贸网站海个推广、Google SEO搜索引擎优化等服务。 https://www.waimaoyes.com/dongguan

一键 input 苹果 OpenELM,零门槛 Llama 3 教程,40+ 优质模型/数据集/教程,建议收藏!...

现在 AI 行业什么最火&#xff1f; 「大模型」一定仍然排在前三甲的位置。 自从 2022 年底 ChatGPT 面世以来&#xff0c;大模型在各行各业已经带来了太多的惊喜&#xff0c;应用场景愈发丰富&#xff0c;同时也带动了相关底层技术的普及与普适化。尤其是在开源模型繁荣发展之下…

拼多多标准推广怎么开出自然流量呢

拼多多标准推广开出自然流量的策略如下&#xff1a; 拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自主设置佣金比例&#xff0c;激励推广者去帮助商家推广商品链接&#xff0c;按最终有效交易金额支付佣金&…

408数据结构-树与森林 自学知识点整理

前置知识&#xff1a;树的基本概念与性质 树的存储结构 树既可以采用顺序存储结构&#xff0c;又可采用链式存储结构。但无论采取哪种方式&#xff0c;都要求能够唯一地反映树中各结点之间的逻辑关系。 1. 双亲表示法 这种存储结构采用一组连续空间来存储每个结点&#xff0…

柯桥西语培训之在西班牙旅游点菜哪些坑不能踩?

Por muy bien que se coma en Espaa —que es mucho— hay una cosa innegable: lo que pasa en la cocina se queda en la cocina. No todos los alimentos son igualmente seguros o sabrosos cuando se encuentran fuera de la comodidad de nuestra propia casa. Ya sea po…