em-remote-select

Remote Select

Install

npm install --save em-remote-select

Add to project

Global

#stylesheet.css

Vue.use options

// main.js
import EmRemoteSelect from 'em-remote-select'
Vue.use(EmRemoteSelect)

Local Usage

<template>
    <div class="page-story">
        <div class="page-story-content" v-if="PREPARE_COMPLETE">
            <el-form
                    v-loading="LOADING"
                    label-position="top"
                    status-icon
                    :model="FORM"
                    :rules="RULES"
                    ref="form"
                    @validate="save"
            >
                <el-form-item
                        label="Partner"
                        prop="partner_id"
                >
                    <em-remote-select
                            resource-name="partners"
                            resource-prefix="admin"
                            :columns-response="['name','telegram_name','avatar']"
                            :columns-search="['telegram_name']"
                            label-param="telegram_name"
                            label-prefix="@"
                            v-model="FORM.partner_id"
                    >
                        <template #default="{item:partner}">
                            <div class="user-line">
                                <el-avatar :src="partner.avatar" size="small" icon="el-icon-user-solid" />
                                <span >@{{partner.telegram_name}}</span>
                            </div>
                        </template>
                    </em-remote-select>
                </el-form-item>
                <el-form-item
                        label="Program"
                        prop="program_id"
                >
                    <em-remote-select
                            resource-name="programs"
                            resource-prefix="admin"
                            v-model="FORM.program_id">
                    </em-remote-select>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import {MixinPageEntryDelegate} from "em-dashboard/src/mixins";
    import EmRemoteSelect from "em-remote-select";

    export default {
        name: "PageLicense",
        components: {EmRemoteSelect, UploadList },
        mixins: [MixinPageEntryDelegate],
        data() {
            return {
                FORM: {
                    program_id:null,
                    partner_id:null,
                },
                RULES: {
                    program_id: [
                        {required: false, message: 'Fill in the field', trigger: 'change'},
                    ],
                    partner_id: [
                        {required: false, message: 'Fill in the field', trigger: 'change'},
                    ],
                }
            }
        },
    }
</script>

Setup

Parameters

Props(Parameter) | Type | Default | Description --------- | ---- | ------- | ----------- resource-name | String | null | Api resource name resource-prefix | String | null | Resource api path prefix on backend columns-response | Array | [name] | List of fields returned in the request columns-search | Array | [name] | List of fields by which to search for items label-param | String | name | The field that is displayed in the dropdown list label-prefix | Object | {} | Prefix to the field that is displayed in the drop-down list clearable | Boolena | false | Whether select can be cleared disable-keys | Boolena | [] | Disable options in list id

License

The MIT License