<>vue + element More flexible secondary packaging , Easier to maintain Select assembly

<> preface

select The drop-down box component should be one of the components that we use frequently when doing projects , When it comes to queries , You can't do without it select Drop down box , This article will show you how to use the vue +
element Encapsulating a flexible , Easy to maintain select assembly .

1, newly build select.vue

Here's what's going on select The complete code of the component , I will explain the contents in detail below
<template> <FormItem :label="label" :prop="dataIndex"> <Select v-model=
"form[dataIndex]" :placeholder="placeholder" :size="size" :disabled="disabled" :
clearable="clearable" :multiple="multiple" :multiple-limit="multipleLimit"
@change="handleChange" style="width: 100%" > <Option v-for="item in options" :
key="item.value" :label="item.name" :value="item.value"></Option> </Select> </
FormItem> </template> <script> import { FormItem, Select, Option } from
"element-ui"; import Store from "./store/store"; export default { name:
"selectC", components: { FormItem, Select, Option }, props: { form: { required:
true, type: Object }, // Form field ( Must pass ) dataIndex: { required: true, type: String },
// Binding value ( Must pass ) label: { type: String, default: "" }, // Form tab signature disabled: { type:
Boolean, default: false }, // Is it disabled size: { type: String, default: "medium" },
// size , Available value medium / small / mini placeholder: { type: String, default: " Please select " },
// Space occupying text clearable: { type: Boolean, default: false }, // Can I clear the options multiple: {
type: Boolean, default: false }, // Multiple choice multipleLimit: { type: Number, default:
0 }, // Limit the maximum number of choices when multiple choices are made loadType: { type: String } }, data() { return { store: new
Store() }; }, computed: { options() { return this.store.SelectStore.getters.
options; } }, mounted() { this.store.SelectStore.dispatch("GET_SELECT_OPTIONS",
{ loadType: this.loadType }); }, methods: { handleChange(e) { this.$emit(
"handleChange", e); } } }; </script>
props Is the property required by the component , Passed from parent component , What we need to pay attention to here is loadType This field , This field represents the load type of the value of the drop-down box , This property will be displayed in the store Used in .

in addition , I also used it vuex As select State management of network , Every time a component is called , Will instantiate a new store, This is to prevent the introduction of multiple pages select assembly , Causes the value of the drop-down box not to be updated .

about store Content in , The code is as follows :
import Vue from 'vue' import Vuex from 'Vuex' Vue.use(Vuex) import {objToArray}
from '@/utils' import {SELECT_TYPES, ORDER_STATUS, ORDER_STATUS_V,
REAL_NAME_STATUS, REAL_NAME_STATUS_V} from '@/constants' class Store {
constructor() { this.SelectStore = this.initStore() } initStore() { return new
Vuex.Store({ state: { options: [] }, getters: { options(state) { return state.
options} }, mutations: { getOptions(state, options) { state.options = options }
}, actions: { GET_SELECT_OPTIONS({commit}, {loadType}) { let options switch (
loadType) { case SELECT_TYPES.ORDER_STATUS: options = objToArray(ORDER_STATUS,
ORDER_STATUS_V) break; case SELECT_TYPES.REAL_NAME_STATUS: options = objToArray(
REAL_NAME_STATUS, REAL_NAME_STATUS_V) break; } commit('getOptions', options) } }
}) } } export default Store

We create one Store class , In class initStore Used to create store,GET_SELECT_OPTIONS Method is used based on the loadType Field to determine the drop-down box data to be loaded ,constants A file is a file that has a front-end enumeration .

objToArray The method is to convert the enumeration to an array .
export const objToArray = (nameObj, valueObj) => { let arr = [] Object.keys(
nameObj).forEach(key => { Object.keys(valueObj).forEach(valKey => { if (key ===
valKey) { arr.push({name: nameObj[key], value: valueObj[valKey]}) } }) }) return
arr}
2, Page
<template> <Form> <SelectC :form="form" dataIndex="selectValue" :loadType=
"loadType" @handleChange="handleChange"/> </Form> </template> <script> import
SelectCfrom "@/components/form/Select"; import { Form } from "element-ui";
import { SELECT_TYPES } from "@/constants"; export default { name: "edit",
components: { SelectC, Form }, data() { return { form: { selectValue: "" },
loadType: SELECT_TYPES.ORDER_STATUS }; }, methods:{ handleChange(e){ console.log
(e) } } }; </script>
Page effect

<> The end of this article , Thank you for watching ! Like it if you think it's helpful !

Technology
©2020 ioDraw All rights reserved
0.96OLED display -4 Line SPI explain C++11 of std::function,std::bind,std::placeholdersJavaScript study ( Function declaration and parameters )QTabWidget Style sheet settings The project passed idea Package and publish to tomcat The server postman Interface test get timestamp and MD5 encryption react Background management configuration route and sidebar :python Simple game code -10 Minutes Python Write a snake game , simple You know? Python What does the foundation include ? Learn something ?10 individual Python Introduction to crawler