xg_total_process_master_cloud_h5/pages/materialManagement/purchase/MyDropdown.vue

<template>
    <u-form-item label="商品名称" :prop="'detailInfos[' + index_experience + '].tradeName'" :required="true">
        <el-autocomplete
                style="width: 100%;"
                v-model="inputForm.detailInfos[index_experience].tradeName"
                placeholder="请选择物品名称"
                clearable
                @focus="showDropdown"
                :fetch-suggestions="fetchSuggestions"
                @select="handleSelect"
        >
            <template slot-scope="{ item }">
                <span style="width: 100%;">{{ item.tradeName }}</span>
            </template>
        </el-autocomplete>
    </u-form-item>
</template>

<script>
    import materialManagementService from '@/api/materialManagement/MaterialManagementService'
    export default {
        props: {
            index_experience: Number,
            inputForm: Object
        },
        data() {
            return {
                showDropdownList: false,
                dropdownList: [],
                selectedTradeName: ''
            };
        },
        created() {
        },
        methods: {
            showDropdown() {
                let row = this.inputForm.detailInfos[this.index_experience]
                row.tradeNameList = []
                row.tradeNameData = []

                let procurementTypeId = this.inputForm.detailInfos[this.index_experience].procurementTypeId

                if (this.isNotEmpty(procurementTypeId)) {
                    // Simulated data
                    materialManagementService.findTradeByTypeId(procurementTypeId)
                        .then((data) => {
                            row.tradeNameList = JSON.parse(JSON.stringify(data))
                            this.dropdownList = JSON.parse(JSON.stringify(data))
                            this.showDropdownList = true; // Move this line here
                        })
                        .catch(() => {
                            // Handle error
                        });
                }
            },
            isEmpty(value) {
                let result = false;
                if (value == null || value == undefined) {
                    result = true;
                }
                if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) {
                    result = true;
                }
                if (typeof value == "object" && value instanceof Array && value.length === 0) {
                    result = true;
                }
                return result;
            },
            isNotEmpty (value) {
                return !this.isEmpty(value)
            },
            fetchSuggestions(queryString, callback) {
                if (this.dropdownList && queryString) {
                    const filteredList = this.dropdownList.filter(item =>
                        item.tradeName.toLowerCase().includes(queryString.toLowerCase())
                    );
                    callback(filteredList);
                } else {
                    callback(this.dropdownList);
                    // Handle the case when dropdownList or queryString is not properly initialized
                }
            },
            handleSelect(item) {
                this.inputForm.detailInfos[this.index_experience].tradeName = item.tradeName;
                this.showDropdownList = false;
            }
        }
    };
</script>

<style scoped>
    .my-dropdown {
        position: absolute;
        top: calc(100% + 4px); /* 将下拉框定位在输入框的下方，此处增加了 4px 的间距 */
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ccc;
    }
    .list-item {
        padding: 8px;
        cursor: pointer;
    }
</style>