美文网首页
封装el-input

封装el-input

作者: 代码小王子 | 来源:发表于2020-07-09 10:51 被阅读0次

    ```<template>

        <div>

            <template>

                <el-select

                        :clearable="newOptions.clearable"

                        :disabled="newOptions.disabled"

                        :filterable="newOptions.filterable"

                        :placeholder="newOptions.placeholder"

                        :value="value"

                        @click="searchSelectBtn()"

                        @input="$emit('input', $event)"

                        @change="searchSelectBtn()"

                        class="total_width"

                        :size="newOptions.size">

                    <el-option

                            :key="index"

                            :label="item[newOptions.labelKey]"

                            :value="item[newOptions.valueKey]"

                            v-for="(item, index) in options"

                    ></el-option>

                </el-select>

            </template>

        </div>

    </template>```

    <script>

        export default {

            name:"BsdSelect",

            props:{

                bsdSelectOptions:{

                    type:Object,

                    default:() =>{

                        return {};

                    }

                },

                value:[Number, String],

            },

            computed:{

                newOptions() {

                    return Object.assign({

                        url:'',

                        labelKey:'label',

                        valueKey:'value',

                        placeholder:'请选择',

                        filterable:false,

                        disabled:false,

                        clearable:true,

                        size:'small'

                    }, this.bsdSelectOptions)

    }

            },

            data() {

                return {

                    options:[]

    }

            },

            methods:{

                getDateList() {

                    this.axiosCommon.getRequest(this.newOptions.url, {})

                        .then((res) =>{

                            this.options = res.data;

                        })

                },

                searchSelectBtn(methods) {  // 按钮事件

                    this.$emit('searchSelectBtn', '22222');

                },

            },

            created() {

                this.getDateList()

    }

    }

    </script>

    相关文章

      网友评论

          本文标题:封装el-input

          本文链接:https://www.haomeiwen.com/subject/xswwwctx.html