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


特别注意

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



对象数组

formDesc: {
  sex: {
    type: 'radio',
    label: '性别',
    // 显示到屏幕上, 分别为男 和 女, 但发送数据分别为 0 和 1, attrs 可选
    options: [
      { text: '男', value: 0, attrs: { size: 'medium',disabled: true } },
      { text: '女', value: 1, attrs: { size : 'medium' } }
    ]
  }
}


自定义对象数组的key


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


字符串数组


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


Promise 对象


formDesc: {
  city: {
    // 从服务器获取数据
    prop: {
      text: 'name',
        value: 'id'
    },
   // Promise 对象
   options: this.$axios.get('http://jsonplaceholder.typicode.com/users')  
  }
}



函数


formDesc: {
  city: {
    // 函数, 函数的返回值可以是以上三种类型: 字符串数组, 对象数组, Promise对象
    options: function (data) {
      return [{ text: '北京', value: 'beijing' }, {text: '深圳', value: 'shenzhen'}]
    }   
  }
}




URL

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


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

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


import axios from 'axios'

axios.interceptors.response.use(response => {
  // 将响应结果返回,这里可以根据实际情况,进一步处理后返回相应的数据
  return response.data
})
Vue.prototype.$axios = axios


第二步:传递options请求方法


<!-- options-fn指定为 $axios.get -->
<ele-form
    v-model="formData"
    :form-desc="formDesc"
    :options-fn="$axios.get"
></ele-form>


第三步:使用


formDesc: {
  user: {
    label: '用户',
    type: 'select',
    // 这里将 options 指定为url即可
    options: 'http://jsonplaceholder.typicode.com/users',
    prop: {
      text: 'name',
      value: 'id'
    }
  }
}



异步动态变化的 options


formDesc: {
  grade: {
    type: 'radio',
    label: '班级',
    options: ['一年级', '二年级', '三年级']
  },
  student: {
    type: 'checkbox',
    label: '学生',
    prop: {
      text: 'name',
      value: 'id'
    },
    vif: data => data.grade,
    // 这里必须制定 optionsLinkageFields 做为关联字段,当次字段值发生变化时,会重新出发请求
    optionsLinkageFields: ['grade'],
    // Promise 对象
    options: async data => {
      const list = await this.$axios.get(
          'http://jsonplaceholder.typicode.com/users',
          { params: { grade: data.grade } }
        )
      return list.slice(
        parseInt(Math.random() * 5),
        parseInt(Math.random() * 10) + 5
      )
    }
  }
}


select 远程搜索

formDesc: {
    user: {
    type: 'select',
    label: '用户',
    attrs: {
        filterable: true,
      remote: true,
      // 相对于官方,增加了一个 callback 参数
      remoteMethod(query, callback) {
        if (query === 'a') {
            setTimeout(() => {
            // 模拟异步
            // eslint-disable-next-line
            callback(['a1', 'a2'])
          }, 1000)
        } else if (query === 'b') {
            setTimeout(() => {
            // 模拟异步
            // eslint-disable-next-line
            callback(['b1', 'b2'])
          }, 1000)
        }else {
          // eslint-disable-next-line
          callback([])
        }
      }
    }
  }
}