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