<template>
<div style="padding: 24px">
<IxProSearch
class="pull-right"
style="width: 80%"
:value.sync="filterValue"
:searchFields="searchFields"
overlay-container='pro-search-wrapper--loophole'>
</IxProSearch>
</div>
</template>
<script setup lang="ts">
import {ref, computed} from 'vue'
const filterValue = ref<SearchValue[]>([]);
const searchFields = computed<SearchField[]>(() => [
{
type: 'select',
label: '终端类型',
key: 'host_type',
quickSelect: true,
placeholder: '终端类型',
fieldConfig: {
multiple: false,
searchable: true,
dataSource: [
{ label: '全部', key: 1},
{ label: 'PC', key:0},
{ label: '服务器', key:3},
]
}
},
{
type: 'input',
label: '关键字1',
key: 'xixi',
keywordFallback: true,
placeholder: '终端类型',
},
{
type: 'input',
label: '关键字2',
key: 'haha',
keywordFallback: true,
placeholder: '终端类型',
},
]);
const searchKeys = computed(() => searchFields.value.map(i => i.key as string));
const filterFields = (fields: SearchField[], keys: string[]) => {
return fields.filter(field => keys.includes(field.key as string))
}
</script>
Reproduction link
playground.idux.site
Steps to reproduce
复现demo:
复现步骤:
第一次输入关键字,回车;
一键清除;
第二次输入关键字,回车;
What is expected?
默认选中的应该还是第一项;
What is actually happening?
默认选中第二项;
Environment Info
Any additional comments? (optional)