当前位置：首页 > news >正文

vue2 ant-design select组件自定义下拉框， dropdownRender 使用，以及遇到的坑

news 来源：原创 2024/9/21 10:56:18

业务需求：下拉框需要满足用户可输入筛选和点击右侧字符按钮 #A-Z进行用户选择

1、基础页面代码

<div><a-selectstyle="width: 100%"placeholder="请选择客户"allow-clearshow-search:filter-option="false":not-found-content="fetching ? undefined : null":defaultActiveFirstOption="false":getPopupContainer="getPopupContainer"@search="searhcCust"@dropdownVisibleChange="dropdownVisibleChange">//dropdownRender 插件使用，自定义右边<divslot="dropdownRender"slot-scope="menu"><div class="index-bar"><divv-for="letterItem in letter":key="letterItem"@click.prevent="scrollOn(letterItem)"class="index-letter"@mousedown="e => e.preventDefault()" // 阻止调用默认事件>{{ letterItem }}</div></div><v-nodes :vnodes="menu" /> // 注意要在components中定义</div><a-select-opt-groupv-for="(group, index) in peoArray":key="index"><spanslot="label"class="option-letter":id="'peo_' + componentId + group.key">{{group.key}}</span><a-select-optionv-for="option in group.list":key="option.custRowId":value="option.custRowId":title="option.custName"><span>{{ option.custName }}</span></a-select-option></a-select-opt-group></a-select></div>

2、script中的代码

<script>
import { debounce } from 'lodash'
export default {props: {componentId: { // 设置不同的id，用于同页面有多个此组件时锚点不生效type: String,default: ''}},components: {VNodes: {functional: true,render: (h, ctx) => ctx.props.vnodes,}},data() {return {dropOpen: false,searchValue: '',navBarHeight: '50px', // 导航栏高度letter: [], // 字母检索列表peoArray: [], // 通讯录列表custList: null,custRowId: undefined,fetching: false,debounceGetCustInfoKeyList: null,}},created() {this.getCustInfoKeyList()this.debounceGetCustInfoKeyList = debounce(this.getCustInfoKeyList, 500)},methods: {dropdownVisibleChange(open) {this.dropOpen = open},getPopupContainer(triggerNode) {if (this.modalSelect) {return triggerNode.parentNode} else {return document.body}},changeCust(val) {this.$emit('change', val)},getList(peoArray) {let newList = []peoArray.forEach(element => {newList.push(...element.list)})return newList},searhcCust(val) {this.searchValue = valthis.debounceGetCustInfoKeyList()},getCustInfoKeyList() {const params = {custName: this.searchValue,}this.$http.XXX(params).then(res => {if (res.code === 200) {this.custList = res.dataif (this.custList) {this.setList()} else {this.peoArray = []}this.fetching = false} else {this.$message.warn(res.msg)this.fetching = false}})},setList() {let list = []this.letter = []for (const key in this.custList) {this.letter.push(key)list.push({key,list: this.custList[key]})}setTimeout(() => {this.peoArray = list})},// 字母检索scrollOn(item) {let target = document.getElementById('peo_' + this.componentId + item) // 获取每个字母通讯录对象if (target) {const scrollDom = document.getElementsByClassName('ant-select-dropdown-menu')[0]scrollDom.scrollTo({behavior: 'smooth',top: target.offsetTop - 10})} else {this.$message.warn(`当前${item}元素下暂无客户`)}}}
}
</script>

3、基础CSS代码


.index-bar {position: absolute;z-index: 99;right: 10px;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;align-items: center;
}.index-letter {margin: 0;cursor: pointer;color: #1677ff;font-weight: 500;font-size: 12px;line-height: 20px;
}
.option-letter {font-weight: 600;color: rgba(0, 0, 0, 0.45);
}

4、遇到的坑是什么呢？
就是在同一个页面，渲染同一个组件时，在点击前一个组件后，后面的组件右侧按钮滚动失效。
造成这个问题的原因就是 dropdownRender 渲染不会销毁，导致scrollOn获取到的DOM是同一组数据，解决方法有两种：

	// 1、在 dropdownRender 插件的地方<divv-if="dropOpen"slot="dropdownRender"slot-scope="menu">// 2、scrollOn 中修改查询Dom方法let target = document.getElementById('peo_' + this.componentId + item) // 获取每个字母通讯录对象if (target) {const parentDom = document.getElementById(offsetParent.id)const scrollDom = parentDom.children[0]scrollDom.scrollTo({behavior: 'smooth',top: target.offsetTop - 10})} else {this.$message.warning(`当前${item}元素下暂无客户`)}