eta_front/src/components/selectUnit.vue

<template>
    <div class="select-unit-box">
        <el-autocomplete
            style="width:100%"
            v-model="unit"
            value-key="label"
            :fetch-suggestions="querySearch"
            :disabled="disabled"
            :placeholder="$t('Edb.InputHolderAll.input_unit')"
            @select="handleChange"
            @change="handleChange"
            @blur.stop="handleChange"
        >
            <template slot-scope="{ item }">
                <div>{{ item.label }}</div>
            </template>
        </el-autocomplete>
    </div>
</template>

<script>
// import { unitArr } from '@/utils/defaultOptions';
/* const unitArr = [
	'无',
	'万吨',
	'亿元',
	'元',
	'元/吨',
	'元/湿吨',
	'千克',
	'吨',
	'短吨',
	'美元/吨',
	'万平方米',
	'美元/桶',
	'美分/加仑',
	'手'
] */
//selectUnit在registryComponents就被初始化,用不了bus
export default {
    name:"selectUnit",
    props:{
        value:{
            type:String,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    watch:{
        value:{
            handler(){
                if(this.value){
                    this.unit = this.getUnitTrans(this.value)
                }
            },
            immediate:true
        }
    },
    data() {
        return {
            unit:'',
            /* unitArr: [], */
        }
    },
    computed:{
        unitArr(){
            return this.getUnitArr()
        }
    },
    mounted(){},
    methods:{
        querySearch(queryString, cb) {
            const unitArr = this.unitArr;
            const results = queryString ? unitArr.filter(this.createFilter(queryString)) : unitArr;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (unit) => {
                return (unit.label.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            };
        },
        handleChange(item){
            //this.unit = item.value
            console.log('单位',this.unit);
            this.$emit('input',item.value||this.unit); //若为unitArr内的单位,则存对应的中文,若为自行输入的单位,则输什么存什么
        },
        getUnitArr(){
            return [
                {value:'无',label:this.$i18nt.t('Edb.UnitAll.u_null')},
                {value:'万吨',label:this.$i18nt.t('Edb.UnitAll.wanton')},
                {value:'亿元',label:this.$i18nt.t('Edb.UnitAll.u_bill')},
                {value:'元',label:this.$i18nt.t('Edb.UnitAll.u_yuan')},
                {value:'元/吨',label:this.$i18nt.t('Edb.UnitAll.yuan_ton')},
                {value:'元/湿吨',label:this.$i18nt.t('Edb.UnitAll.yuan_wetton')},
                {value:'千克',label:this.$i18nt.t('Edb.UnitAll.u_kg')},
                {value:'吨',label:this.$i18nt.t('Edb.UnitAll.u_ton')},
                {value:'短吨',label:this.$i18nt.t('Edb.UnitAll.short_ton')},
                {value:'美元/吨',label:this.$i18nt.t('Edb.UnitAll.doll_ton')},
                {value:'万平方千米',label:this.$i18nt.t('Edb.UnitAll.wan_skilo')},
                {value:'美元/桶',label:this.$i18nt.t('Edb.UnitAll.doll_bar')},
                {value:'美分/加仑',label:this.$i18nt.t('Edb.UnitAll.cent_gal')},
                {value:'手',label:this.$i18nt.t('Edb.UnitAll.u_hand')},
            ]
        },
        getUnitTrans(unit){
            const map = {
                '无':this.$i18nt.t('Edb.UnitAll.u_null'),
                '万吨':this.$i18nt.t('Edb.UnitAll.wanton'),
                '亿元':this.$i18nt.t('Edb.UnitAll.u_bill'),
                '元':this.$i18nt.t('Edb.UnitAll.u_yuan'),
                '元/吨':this.$i18nt.t('Edb.UnitAll.yuan_ton'),
                '元/湿吨':this.$i18nt.t('Edb.UnitAll.yuan_wetton'),
                '千克':this.$i18nt.t('Edb.UnitAll.u_kg'),
                '吨':this.$i18nt.t('Edb.UnitAll.u_ton'),
                '短吨':this.$i18nt.t('Edb.UnitAll.short_ton'),
                '美元/吨':this.$i18nt.t('Edb.UnitAll.doll_ton'),
                '万平方千米':this.$i18nt.t('Edb.UnitAll.wan_skilo'),
                '美元/桶':this.$i18nt.t('Edb.UnitAll.doll_bar'),
                '美分/加仑':this.$i18nt.t('Edb.UnitAll.cent_gal'),
                '手':this.$i18nt.t('Edb.UnitAll.u_hand'),
            }
            return map[unit]||unit //若是自行输入的单位,直接返回
        }
    }
}
</script>

<style lang="scss">
.select-unit-box{
    width: 100%;
    .el-input{
        width: 100% !important;
    }
}
</style>