©2020-2024 ioDraw All rights reserved
<>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