const inputRefs = ref([]); // 定义左侧列表栏的输入框的ref
const handlepPressEnter = async (item: any, index: any) => {
inputRefs.value[index].blur();
};
<div class="left">
<div
class="title"
@click="changeHandel"
:class="activeTabs == 0 ? 'active' : ''"
>
<p>全部</p>
<span class="dot" v-if="isDefault">默认</span>
</div>
<div
class="divider-line"
:style="{
'margin-bottom': filterData?.list.length ? '16px' : '10px',
}"
>
<span>自定义筛选</span>
</div>
<div class="filterList" v-if="filterData?.list.length">
<div
v-for="(item, index) in filterData.list"
:key="index"
class="title"
:class="
titleActiveTabs == index && activeTabs == 1 ? 'active' : ''
"
@mousemove="handleMouseOver(item, index)"
@mouseleave="handleMouseLeave(item, index)"
>
<p v-if="!item.isEdit" @click="changeFilter(item, index)">
<!-- {{ item.isDisabled }}- -->
{{ item.name }}
</p>
<a-input
v-else
v-model:value="item.name"
placeholder="请输入"
style="width: 100%"
focus
:maxlength="30"
@focus="handleFocus(item, index)"
@blur="handleBlur(item, index)"
@pressEnter="handlepPressEnter(item, index)"
:ref="(el) => (inputRefs[index] = el)"
/>
<!-- :ref="inputRefs" -->
<span
class="dot"
v-if="
item.defaultFlag == 1 && !item.isShowIcon && !item.isEdit
"
>默认</span
>
<span
class="edit-icon"
v-if="item.isShowIcon && !item.isEdit"
@click="editIconHandel(item, index)"
><img src="@/assets/images/screen-img/edit.svg" alt=""
/></span>
</div>
</div>
<a-button
style="border: none; padding: 0"
:disabled="filterData.list.length < 5 ? false : true"
:class="
filterData.list.length < 5 ? 'nameColorActive' : 'nameColor'
"
@click="addFilterItem"
type="link"
>
<PlusCircleFilled
style="fontsize: 24px; margin-right: 5px"
:class="
filterData.list.length < 5 ? 'nameColorActive' : 'nameColor'
"
/>
新建筛选
</a-button>
<div class="tip">仅支持保存5个</div>
</div>