ele-custom-select v1.0.2

ele-custom-select

基于elementUI select组件改造的custom-select组件。

主要功能为：

1. 可输入code回车选中对应值（只能定位value，需要label和value一致）

2. 可输入选项不存在的值 表单提交时当做新增元素提交

install & Usage

# install dependencies
npm install ele-custom-select

# Usage
import customSelect from 'ele-custom-select'
Vue.use(customSelect)

# use in page
<el-form-item label="性别" prop="gender">
    <custom-select v-model="formData.gender">
        <el-option v-for="item in gender" :key="item.value" :value="item.value" :label="item.label" :code="item.code">{{item.label}}[{{item.code}}]</el-option>
    </custom-select>
</el-form-item>

<script>
    export default {
        data() {
            return {
                formData: {
                    gender: '',
                },
                gender: [
                    {
                        value: "F",
                        label: "女",
                        code: "F"
                    },
                    {
                        value: "M",
                        label: "男",
                        code: "M"
                    },
                    {
                        value: "0",
                        label: "不详",
                        code: "0"
                    }
                ],
            }
        }
    }
</script>

Operation

鼠标点击输入框聚焦，可输入对应编码或新增内容，鼠标点击箭头可展开/收起选项列表