自动完成控件

This commit is contained in:
gary.fu
2024-01-05 10:14:49 +08:00
parent 144d68bc0c
commit 1d115479a3
3 changed files with 42 additions and 32 deletions

View File

@@ -105,14 +105,19 @@ const emit = defineEmits(['update:modelValue', 'onSelectData', 'update:page', 'u
const keywords = ref(props.autocompleteLabel)
const lastAutocompleteLabel = ref(props.autocompleteLabel)
const pageAttrs = { layout: 'total, prev, pager, next' }
const pageAttrs = { layout: 'total, prev, pager, next', small: true }
const dataList = ref([])
const popoverVisible = ref(false)
const autocompletePopover = ref()
const pageConfig = useVModel(props, 'page', emit)
const onInputKeywords = debounce((click) => {
/**
* @type {function(boolean?)}
*/
const onInputKeywords = debounce((input) => {
if (!props.disabled && !props.readonly) {
if (input && pageConfig.value) {
pageConfig.value = { ...pageConfig.value, pageNumber: 1 }
}
const val = keywords.value
if (val || props.emptySearchEnabled) {
popoverVisible.value = true
@@ -123,7 +128,7 @@ const onInputKeywords = debounce((click) => {
}
})
}
if (!val && !click) {
if (!val && input) {
onSelectData()
}
}
@@ -228,8 +233,8 @@ onKeyStroke('Enter', e => {
:disabled="disabled"
:readonly="readonly"
v-bind="inputAttrs"
@input="onInputKeywords()"
@click="onInputKeywords(true)"
@input="onInputKeywords(true)"
@click="onInputKeywords(false)"
/>
</template>
<template #default>
@@ -243,7 +248,7 @@ onKeyStroke('Enter', e => {
:data="dataList"
:page-attrs="pageAttrs"
@row-click="onSelectData($event)"
@current-page-change="onInputKeywords()"
@current-page-change="onInputKeywords(false)"
>
<template
v-for="column in autocompleteConfig.columns"

View File

@@ -16,6 +16,8 @@
*/
/**
* 配置信息
* @property {CommonTableColumn[]} columns 表格显示列配置
* @buttonSize {''|'large'|'small'|'default'}
*/
const props = defineProps({
/**
@@ -40,7 +42,7 @@ const props = defineProps({
<el-table-column
v-if="!column.isOperation"
:label="column.label || $t(column.labelKey)"
:property="column.property"
:prop="column.prop||column.property"
:width="column.width"
v-bind="column.attrs"
:formatter="column.formatter"