【vue】封装下拉框option静态数据

之前在vue-cli中，有些静态下拉框数据都写在每个vue页面文件里，发现有些页面也会使用一样的，所以想着把它抽出来方便管理和查看

思路总结

1.创建一个js文件

在src/libs目录(看项目目录结构灵活放)下创建 options.js , 先只写了一个，文件内容如下：

export const userStatusOpt = [
    {
        value: 0,
        label: '禁用'
    },
    {
        value: 1,
        label: '启用'
    }
]

2.在vue页面js部分先引入

import { userStatusOpt } from '@/libs/options.js';

在data属性先声明和赋值

data(){
	return {
	   userStatusOpt : userStatusOpt 
	}
}

3.在vue页面标签中使用

使用场景是ivew,也可以是element-ui或其他方式

<Select v-model = "formData.userStatus">
    <Option v-for="item in userStatusOpt " :value="item.value" :key="item.value" :label="item.label" />
</Select>