bab-icon/resources/js/components/UiSelect.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Select'}}</label>
        </el-col>
        <el-col :span="14">
            <el-select
                :id="select_ui_id"
                v-model="value"
                :multiple="multiple ? true : false"
                :disabled="disabled ? true : false"
                :size="size ? size : 'large'"
                :clearable="clearable ? true : false"
                :multiple-limit="multipleLimit ? multiple-limit : 0"
                :placeholder="placeholder ? placeholder : '请选择'"
                @change="selectChange">
                <el-option
                  v-for="item in options.attr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value+''"
                  :disabled="disabled ? true : false">
                  <span v-if="freez" style="float: left">{{item.label}}</span>
                  <span v-if="freez" style="float: right; color: #8492a6; font-size: 13px">{{item.notice?item.notice:item.value}}</span>
                </el-option>
            </el-select>
            <input type='text' :name="name?name:'select'" :id="name" class="ui-input-select-el-col-select" :value="value" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)">
        </el-col>
        <el-col :span="7">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','multiple','disabled','size','clearable','multipleLimit','name','placeholder','free','tips','options'],
        data() {
            return {
                freez: this._props.free ? true : false,
                value: this._props.options.checked ? this._props.options.checked : '',
                select_ui_id: this._props.name ? 'select-ui-'+this._props.name : 'select-ui-id'
            };
        },
        mounted() {
            if( this._props.multiple ){
                $(document).find('#select-ui-'+this._props.name+' input.el-input__inner').css({color:'rgba(255,255,255,0)'});
                if( this._props.options.checked ){
                    this.setData(this._props.options.checked);
                }
            }
        },
        methods: {
            selectChange(value) {
                this.setData(value);
                this.$emit('set-keys',value);
            },
            setData(value) {
                if( this._props.multiple ){
                    var str = value.join(';');
                    $(document).find('input#'+this._props.name).val(str);
                }else{
                    $(document).find('input#'+this._props.name).val(value);
                    $(document).find('input#'+this._props.name).trigger("change");
                }
            }
        }
    }
</script>

<style scoped>
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>