0.0.17 • Published 3 years ago
em-remote-select v0.0.17
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 |