用json文件做下拉框的内容和值
用json文件做下拉框的内容和值
一、前言
最近在做一个app,里面有个表单,用到了下拉框,而下拉框的值和内容,按照常理说,是从服务器下载的,但是我这个app比较特殊,暂时不联网,且下拉数据固定,所以,下拉数据存放于json文件中。
下面介绍我这个app的下拉框制作代码
用到的组件:antdesign的Cascader组件
二、代码展示
1.typeIp.json
[{
"label": "数控设备",
"value": "192.168.xxx.001"
},
{
"label": "机器人",
"value": "192.168.xxx.002"
},
{
"label": "注塑机",
"value": "192.168.xxx.003"
},
{
"label": "其他",
"value": "192.168.xxx.004"
}
]
2.使用下拉框的页面.js
import { Cascader } from 'antd'//组件:ant
import typeIp from '../assets/json/typeIp.json' //数据:设备类型和默认IP对应关系
let dataTree = [] //设备类型与默认IP对应关系树
let thisEquipmentType = []//用于修改设备类型时回显设备类型用
// 构造函数
constructor(props) {
super(props)
this.state = {
message: { // 填写的数据
boxId: '',
equipmentType: '',
productModel: '',
name: '',
ip: '',
line: '',
},
}
}
componentDidMount() {
//获取json文件中 设备类型与默认IP的对应关系 用于下拉选择
dataTree = typeIp
//thisEquipmentType,用于回显设备类型
thisEquipmentType[0] = reciveData.oneMessage.equipmentType
}
//render
<div className="row">
<div className="text">设备类型:</div>
{flag === "add" && <Cascader className="input" options={dataTree} onChange={this.handleTypes} placeholder="请选择设备类型" />}
{flag === "change" && <Cascader className="input" options={dataTree} defaultValue={thisEquipmentType} onChange={this.handleTypes} placeholder="请选择设备类型" />}
</div>
// 获取设备类型选项 根据设备类型 获取设备类型和默认ip
handleTypes = (value, data) => {
this.setState(preState => {
return Object.assign({}, preState, {
message: Object.assign({}, preState.message, {
equipmentType: data[0] && data[0].label || '',
ip: data[0] && data[0].value || ''
})
})
})
}