In the actual development , Some optional fields are usually stored with numbers instead of words , The front-end display uses text , So in avue in , Dictionaries are usually used as these fields ( Drop down box , Multiple choice , Single choice ) Treatment of .

1.1 Fill in directly in the current page column

A small number of options are available
column: [{ label: " Operation status ", prop: "businessStatus", type: "select", dicData: [ {
label: " normal ", value: 1, }, { label: " abnormal ", value: 2, } ], hide: false }],
1.2 Unified write dict.js export
// dict.js export const INDUSTRY_TYPE= [ { label:" Please select industry ", value:0 }, {
label:" agriculture , Forest , Animal husbandry , Fisheries ", value:1 }, { label:" Mining ", value:2 }] // component.vue import
* as dict from '@/const/dict' column: [{ label: " industry ", prop: "industry", hide:
false, type: 'select', dicData: INDUSTRY_TYPE, }]
1.3 Background interface introduction
// Directly through dicUrl introduce api Interface column: [{ label: ' Dictionaries ', prop: 'text', props: { //
The configuration interface data corresponds to the label and value label: 'name', value: 'code' }, // dicUrl:
`${baseUrl}/getProvince`, dicUrl: 'api/system-areas/provices' // Front and rear separated api Module interface
dicMethod:'get', dicQuery:{ code: 1 }, span:24, type:'select' }] //
The second one can store the data of its own related interface to vuex in , // Then specify label and value The corresponding value is OK { label: " Founder ", prop:
"createId", type: "select", props: { label: 'username', value: 'id' }, dicData:
this.$store.getters.userList },
 

Technology
©2019-2020 Toolsou All rights reserved,
Send love - A little romance for programmers VHDL—— Design of frequency divider Python Implementation of Hanoi Tower code It's over , Starting salary 30khtml+css+js Make a simple website home page QQ Login interface implementation Hill sorting of sorting algorithm ——c++ realization 【 Wechat applet learning 】 Netease music cloud code page implementation details Resume the 13th session python Blue Bridge Cup 2022 Solution to the 13th Blue Bridge Cup ( whole )