options对select、checkbox、radio做了封装,统一的key和value,并且支持支持如下类型:

对象数组

1formDesc: {
2  sex: {
3    // 显示到屏幕上, 分别为男 和 女, 但发送数据分别为 0 和 1, attrs 可选
4    options: [
5      { text: '男', value: 0, attrs: { size: 'medium' } },
6      { text: '女', value: 1, attrs: { size : 'medium' } }
7    ]
8  }
9}


自定义对象数组的key


 1formDesc: {
 2  city: {
 3    // 我们假设从数据库获取的数据,name为显示字段,id为发送的数据值
 4    options: [
 5      { name: '北京', id: 0},
 6      { name: '上海', id: 1}
 7    ],
 8    // 只需要将 text指定为 'name' 字段,value指定为 'id'字段即可
 9    prop: { text: 'name', value: 'id' }
10  }
11}


字符串数组


1formDesc: {
2  sex: {
3    // 显示到屏幕上, 分别为男 和 女, 但发送数据分别为 男 和 女
4    options: ['男', '女']
5  }
6}


Promise 对象


1formDesc: {
2  city: {
3    // 从服务器获取数据
4    options: getCity('/api/city') // 返回的是Promise
5  }
6}


函数


1formDesc: {
2  city: {
3    // 函数, 函数的返回值可以是以上三种类型: 字符串数组, 对象数组, Promise对象
4    // 当 isReloadOptions 为 true 时,可以进行联动处理
5    options: function (data) {
6      return [{ text: '北京', value: 'beijing' }, {text: '深圳', value: 'shenzhen'}]
7    }   
8  }
9}


URL

options支持直接传递URL,但需要制定请求函数,下面以axios为例:


第一步:注册axios,并直接拦截器

目的是返回以上四种结果,如果没有拦截器,请求信息包括请求信息、响应信息、请求头等不必要数据


1import axios from 'axios'
2
3axios.interceptors.response.use(response => {
4  // 将响应结果返回
5  return response.data
6})
7Vue.prototype.$axios = axios


第二步:传递options请求方法


1<!-- options-fn指定为 $axios.get -->
2<ele-form
3    :form-data="formData"
4    :form-desc="formDesc"
5    :options-fn="$axios.get"
6></ele-form>


第三步:使用


 1formDesc: {
 2  user: {
 3    label: '用户',
 4    type: 'select',
 5    // 这里将 options 指定为url即可
 6    options: 'http://jsonplaceholder.typicode.com/users',
 7    prop: {
 8      text: 'name',
 9      value: 'id'
10    }
11  }
12}


特别注意


⚠️ 这里有两个组件需要注意: