I. Functional requirements

1. Given a group of employee information (in actual project, it can be obtained through the interface), the employee OA is required to be input, the name of the employee is automatically retrieved, selected and added (multiple options are available).

2. Default employees (such as administrators) cannot be deleted.

Second, implementation dependency

  • vue

  • The remote search function of Element UI’s Select component

Third, implementation method

1. Add employee name according to input OA (optional)

1.1 Define employee information list userList in data, options, lazy loading loading and form data form.

Options: [], loading: false, userList: [{id: 1, OA: '10001', name: 'administrator'}, {id: 2, OA: '23342', name: 'xiaohong'}, {id: 2, OA: '23342', name: 'xiaohong'} 3, oa: '51675', name: 'xiao Ming'}, {id: 4, oa: '39800', name: 'Joe'}, {id: 5, oa: '65002', name: 'bill'}], form: {the users: []// Accept selected employee's OA},Copy the code

1.2 Page rendering and parameter binding (options, userList, loading).

<el-form ref="form" :model="form" label-width="100px" :rules="rules" > <el-form-item label=" prop="users"> <el-select V-model ="form.users" multiple filterable remote :reserve-keyword="false" default-first-option placeholder=" style="width:100%" :remote-method="remoteMethod" :loading="loading" > <el-option v-for="item in options" :key="item.oa" :label="item.name" :value="item.oa" /> </el-select> </el-form-item> </el-form>Copy the code

1.3 The implementation methods of methods are mainly remoteMethod.

As long as oa contains input characters, a list of all qualified employees will be returned and assigned to Options.

remoteMethod(query) { if (query ! == '') { this.loading = true setTimeout(() => { this.loading = false this.options = this.userList.filter(item => { return item.oa.toLowerCase() .indexOf(query.toLowerCase()) > -1 }) }, 100) } else { this.options = [] } },Copy the code

1.4 Effect display.

2. Set the default value and the default value cannot be deleted

Solution: In order to realize the default value can not be deleted, first of all, the default value tag can not be deleted, including hiding the close button and shielding the keyboard deletion operation; The options option corresponding to the default value cannot be selected. Here’s how to do it:

2.1 Setting the Administrator To the Default Value.

Created () {this.form.users.push('10001');} this.remotemethod ('10001')};Copy the code

2.2 Custom instruction V-defaultSelect in main.js is used to control the display and hiding of the close button.

Directive ('defaultSelect', {// https://cn.vuejs.org/v2/guide/custom-directive.html inserted (el, bindings, vnode) {/ / values: v - model binding values / / options: Dropdown options // prop: value property corresponding to options // defaultProp: defaultValue judgment property // defaultValue: Const [values, options, prop, defaultProp, Const indexs = [] const tempData = values.map(a => options.find(op =>) op[prop] === a)) tempData.forEach((a, index) => { if (a[defaultProp] === defaultValue) indexs.push(index) }) const dealStyle = function(tags) { tags.forEach((el, index) => { if (indexs.includes(index) && ! [... el.classlist]. Includes ('select-tag-close-none')) {el.classlist. add('none')}})} // Hidden close icon const tags = el.querySelectorAll('.el-tag__close') if (tag.length === 0) {// Initialize tags to null setTimeout(() =>  { const tagTemp = el.querySelectorAll('.el-tag__close') dealStyle(tagTemp) }) } else { dealStyle(tags) } } })Copy the code

2.3 Define the hide close button style None in app.vue.

<style> .none{ display:none ! important; } </style>Copy the code

2.4 The new parameter disabled is added to the userList to control whether options are optional. True indicates that options are optional. False indicates that options are optional.

UserList: [{id: 1, OA: '10001', name: 'administrator ', disabled: true}, {id: 2, OA: '23342', name:' red ', disabled: False}, {id: 3, OA: '51675', name: 'Ming ', disabled: false}, {id: 4, OA: '39800', name:' Zhang SAN ', disabled: False}, {id: 5, oa: '65002', name: 'li Si ', disabled: false}],Copy the code

2.5 Customize the style when the Options option is unavailable and available on the current page.

<style> .class1{ color: #c3cfdb ! important; /* Optional */}. Class2 {color: #409EFF! important; /* Optional */} </style>Copy the code

2.6 Page rendering and tag attribute binding.

  • New bindings for the V-DefaultSelect directive (binding to the EL-Select tag) : the main function is to hide the closing button of the default tag.

  • New bindings for the Disabled attribute (bound to the el-Option tag) : The default value in the options option is not selectable.

  • New class attribute binding (binding to the el-option tag) : The option is dimmed if disabled is true (the default value is not optional). Otherwise, the option is dimmed.

    <el-form ref="form" :model="form" label-width="100px" :rules="rules" > <el-form-item style="margin-bottom: 20px;" Label =" member "prop="users"> <el-select V-model ="form.users" V-defaultSelect ="[form.users,options,'oa','disabled',true]" Multiple filterable remote :reserve-keyword="false" default-first-option placeholder=" placeholder "style="width:100%" :remote-method="remoteMethod" :loading="loading" > <el-option v-for="item in options" :key="item.oa" :label="item.name" :value="item.oa" :disabled="item.disabled" :class="item.disabled === true ? 'class1' : 'class2'" /> </el-select> </el-form-item> </el-form>Copy the code

2.7 Effect Display

The above basically realizes the default value cannot be deleted, but when testing, it is found that when the mouse cursor is in the input box, the default value can still be deleted by using the keyboard “Backspace”, which is obviously wrong.

The solution is to disable the keyboard delete function, but it does not work. The reason seems to be that each selected item is a separate SPAN tag, and the keyboard operation is for the input box, so it does not take effect, and even if it did, it would require the read-only property readonly, which would disable the input box. Obviously not here, because we need to continue adding members, so I don’t have a good idea. Welcome to have the idea of small partners message to solve, here worship each big guy.

Four,

The above content simply to implement this function, applies only to the page after the initialization of preliminary operation, in actual project, when it comes to playing box shows, edit content echo, closed bomb box initialize the default values, such as operation, may lead to more than a certain content, friends can be optimized according to the actual situation, thank you!

Reference article: blog.csdn.net/qq_36356218…