121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
|
|
<template>
|
|
<el-input
|
|
ref="inputRef"
|
|
style="width: 100%;height: 100%"
|
|
v-model="keyword"
|
|
:prefix-icon="Plus"
|
|
:placeholder="props.placeholder"
|
|
:style="{'width': props.width+'px'}"
|
|
clearable
|
|
@input="changeInput"
|
|
class="no-border-input"
|
|
:disabled="disabled"
|
|
|
|
>
|
|
</el-input>
|
|
|
|
<el-popover placement="bottom-start" trigger="click" :width="props.width" ref="popoverRef" :virtual-ref="inputRef">
|
|
<div class="container">
|
|
<el-table
|
|
:data="searchList" style="width: 100%"
|
|
@row-click="clickRow"
|
|
:show-header="props.showHeader"
|
|
max-height="200px"
|
|
>
|
|
<el-table-column
|
|
v-for="item in showConfig"
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
show-overflow-tooltip
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script setup lang="ts">import {ref, unref} from "vue";
|
|
import { post } from "@/utils/request.ts";
|
|
import { Plus } from "@element-plus/icons-vue";
|
|
|
|
const keyword = ref("");
|
|
const popoverRef = ref();
|
|
const inputRef = ref();
|
|
interface showConfig {
|
|
prop: string;
|
|
label: string;
|
|
}
|
|
|
|
const props = defineProps({
|
|
requestApi: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 1000
|
|
},
|
|
showConfig: {
|
|
type: Array as () => showConfig[],
|
|
default: () => []
|
|
},
|
|
showHeader: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const searchList = ref([]);
|
|
|
|
const changeInput = (inputStr: string) => {
|
|
unref(popoverRef).popperRef?.delayHide?.()
|
|
if (!props.requestApi || props.requestApi === "") {
|
|
return;
|
|
}
|
|
post(props.requestApi, { keyword: keyword.value }).then((res: any) => {
|
|
searchList.value = res;
|
|
});
|
|
|
|
};
|
|
|
|
const emit = defineEmits(['selectedCallBack']);
|
|
|
|
const clickRow = (row: any) => {
|
|
emit('selectedCallBack', row);
|
|
popoverRef.value.hide();
|
|
keyword.value=""
|
|
};
|
|
|
|
const beforeShow = () => {
|
|
if (searchList.value.length === 0) {
|
|
popoverRef.value.hide();
|
|
}
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.no-border-input {
|
|
:deep(.el-input__wrapper) {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
&:hover{
|
|
border: 1px solid #409eff !important;
|
|
}
|
|
}
|
|
</style> |