自定义封装组件-国际化-下拉搜索

本文针对自定义封装中的组件进行解析和学习（ 使用ClazzSelectPlus字段名称来封装组件）在文章的最后展示ClazzSelectPlus文件中封装的代码

代码解析

---

在处理国际化的时候，首先封装一下组件，

1. :inputinner.sync="orderBaseForm[$t('orderLanguage.otherLabel.checkTemplate')]"---------将checkTemplate在orderBaseForm中定义

2. :interface='managementList'-------------调用函数managementList

在<script>中进行引入

​import {
    managementList,
} from "@/admin/index/api/basis/basicCustomer";

在data中进行定义 

data() {
    return {
        managementList: managementList,}
   }

 在/api/basis/basicCustomer路径接口中调用（调用方式各有不同）

export const managementList = (data) => {
    return sendReq({
        queryUrl: `${config.prefixUrl.serverApi}/system/checkTemplate/search`,
        req: {
            method: 'get',
            data: data
        }
    })
}

 3. :placeholder="$t('orderLanguage.formLabel.refCheckTemplatePlaceholder')"

 $t(''):vue-i18n 数据渲染的模板语法----input输入框的文字提示

 4.:show-column="[{label: '中文名称', prop: 'cnName'}, {label: '英文名称', prop: 'enName'}]"

当前标题行的文字展示-------label为中文字段，prop为接口中传过来的中文名称对应的值

5. input-key="id"

根据不同的key值来标注唯一性，id为后台传过来的主键

6. input-label="cnName"

当前对应输入在文本框中的值，即为后端传来对应的中文名称 

 7. @select="selectCheckTemplate"

对传来的数据数据进行过滤，在当前行只显示对应的中文名称和英文名称

selectCheckTemplate(row){
    if (row) {
        this.orderBaseForm.checkTemplateNameCn = row['cnName'];
        this.orderBaseForm.checkTemplateNameEn = row['enName'];
        return;
    }
    this.orderBaseForm.checkTemplateNameCn = null;
    this.orderBaseForm.checkTemplateNameEn = null;
},

---

效果展示

ClazzSelectPlus代码展示：

<template>
    <div class="components-container">
        <el-input v-if="disabled" v-model="temp" :placeholder="placeholder" suffix-icon="el-icon-search" disabled></el-input>
        <el-popover v-else ref="popover" trigger="focus" v-model="visible" :placement="placement" :open-delay="5"
                    @after-enter="handleAfterEnter" :append-to-body="true">
            <el-pagination v-if="paged" style="margin-bottom: 3px"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           small
                           :pager-count="5"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="defaultPageSize"
                           :total="total"
                           layout="total,prev, pager, next, jumper"
            >
            </el-pagination>
            <el-table :data="filterGridData" :style="getInlineStyle()" :show-header="showHeader" max-height="470"
                      empty-text="暂无数据" fit
                      :header-cell-style="{background : 'rgb(230,238,250)', 'font-size': '13px', color: 'black'}"
                      @row-click="handleClick" @row-dblclick="handleDblClick">
                <el-table-column v-for="(item,index) in showColumn" :key="index" :property="item.prop"
                                 :label="item.label"></el-table-column>
            </el-table>
            <el-input v-model="temp" slot="reference" :placeholder="placeholder" @input="handleInput"
                      @keyup.enter.native.stop="handleEnter" @blur="handleBlur" @focus="handleFocus"
                      clearable @clear="clearClick"
                      suffix-icon="el-icon-search">
            </el-input>
        </el-popover>
    </div>
</template>
<script>
    export default {
        name: "ClazzSelectPlus",
        props: {
            width: Number,
            value: {},
            placeholder: String,
            dblclick: Boolean,
            disabled: Boolean,
            filterKey: String,
            placement: {
                type: String,
                default: 'bottom'
            },
            inputKey: {
                type: String,
                required: true
            },
            inputLabel: {
                type: String,
                required: true
            },
            interface: {
                type: Function,
                required: true
            },
            clear: {
                type: Function
            },
            showHeader: {
                type: Boolean,
                default: true
            },
            defaultQuery: {
                type: Boolean,
                default: true
            },
            allowCustom: {
                type: Boolean,
                default: false
            },
            defaultPageSize: {
                type: Number,
                default: 5
            },
            defaultQueryParam: Object,
            showColumn: Array,
            inputInner: String
        },
        watch: {
            inputInner(val) {
                this.temp = val
            },
            defaultQueryParam: {
                handler(val) {
                    this.handleChangeDefaultParam(val)
                }
            }
        },
        data() {
            return {
                visible: false,
                paged: false,
                temp: '',
                fixLabel: '',
                fixQueryParam: {},
                currentPage: 1,
                gridData: [],
                filterGridData: null,
                queryParam: {
                    pageNum: 1,
                    pageSize: this.defaultPageSize
                },
                total: 0,
            }
        },
        mounted() {
            if (this.inputInner) {
                this.temp = this.inputInner;
            }
            this.init()
        },
        methods: {
            clearClick(){
                this.$emit('clear', null);
            },
            clearData() {
                this.temp = ''
                this.$emit('input', null);
                this.$emit('select', null);
                this.$emit('update:inputInner', null);
            },
            init() {
                let param = this.queryParam
                if (this.defaultQueryParam) {
                    param = Object.assign(this.queryParam, this.defaultQueryParam);
                }
                this.getGridData(param)
            },
            getGridData(param) {
                this.interface(param).then((res) => {
                    if (res && res.data && res.data.success) {
                        if (res.data.data.list) {
                            this.paged = true;
                            this.gridData = res.data.data.list;
                            this.total = res.data.data.total;
                        } else {
                            this.paged = false;
                            this.gridData = res.data.data;
                        }
                        this.filterGridData = this.gridData
                    }
                    this.$refs.popover.updatePopper()
                });
            },
            getInlineStyle() {
                let style = {};
                if (this.width) {
                    style.width = this.width + 'px';
                }
                return style;
            },
            handleSizeChange(val) {
                this.queryParam.pageNum = 1
                this.queryParam.pageSize = val
                this.getGridData(this.queryParam)
            },
            handleCurrentChange(val) {
                this.queryParam.pageNum = val
                this.getGridData(this.queryParam)
            },
            handleClick(row) {
                if (!this.dblclick) {
                    this.handleSelect(row)
                }
            },
            handleDblClick(row) {
                if (this.dblclick) {
                    this.handleSelect(row)
                }
            },
            handleSelect(row) {
                this.temp = row[this.inputLabel];
                this.fixLabel = this.temp
                this.$emit('input', row[this.inputKey]);
                this.$emit('select', row);
                this.$emit('update:inputInner', this.temp);
                this.visible = false;
            },
            handleInput(val) {
                if (this.allowCustom) {
                    this.$emit('input', val);
                }
                if (!val) {
                    this.clearData();
                    if (this.defaultQuery) {
                        if (this.paged) {
                            if (this.filterKey) {
                                this.queryParam[this.filterKey] = val
                            }
                            this.queryParam.pageNum = 1
                            this.queryParam.pageSize = this.defaultPageSize
                            this.getGridData(this.queryParam)
                        } else {
                            this.filterGridData = this.gridData;
                        }
                    } else {
                        this.filterGridData = []
                        this.gridData = []
                    }
                    return;
                }
                if (this.showColumn && this.showColumn.length > 0) {
                    if (this.paged) {
                        this.queryParam.pageNum = 1
                        this.queryParam.pageSize = this.defaultPageSize
                        if (this.filterKey) {
                            this.queryParam[this.filterKey] = val
                        }
                        this.getGridData(this.queryParam)
                    } else {
                        this.filterGridData = this.gridData.filter(data => {
                            let bool = false
                            for (let i = 0; i < this.showColumn.length; i++) {
                                let col = this.showColumn[i]
                                let prop = col.prop
                                if (data[prop] && data[prop].indexOf(val) > -1) {
                                    return true
                                }
                            }
                        });
                    }
                }
            },
            handleEnter() {
                if (this.filterGridData && this.filterGridData.length === 1) {
                    this.handleSelect(this.filterGridData[0])
                }
            },
            handleFocus() {
                this.visible = true
            },
            handleBlur(event) {
                if (!this.allowCustom && this.fixLabel !== this.temp) {
                    this.clearData();
                }
                // let tooltip = document.getElementById(this.$refs.popover.tooltipId)
                // console.log(tooltip.offsetTop)
                // console.log(tooltip.offsetLeft)
                // console.log(event);
                // this.visible = false
            },
            handleChangeDefaultParam(val) {
                if (val) {
                    if (Object.keys(val).length !== Object.keys(this.fixQueryParam).length) {
                        this.init();
                    } else {
                        for (let key in this.fixQueryParam) {
                            if (val[key] !== this.fixQueryParam[key]) {
                                this.init()
                            }
                        }
                    }
                    this.fixQueryParam = val
                }
            },
            handleAfterEnter() {
                this.$refs.popover.updatePopper()
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .components-container {
        position: relative;
    }
</style>