主要代码是在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>
