<!--普通使用--> <input-number v-model="someNumber" :min="1" :max="99" :decimal1="2" append="元"></input-number> <!--在dynamic-form-item中的应用--> <input-number v-else-if="item.type==='number'" v-bind="$attrs" v-on="$listeners" :min="item.min" :max="item.max" :decimal1="item.decimal1" :append="item.append" :prepend="item.prepend" :disabled="item.disabled"></input-number>
完整代码： src/components/dynamic-form/input-number.vue
2.异步验证
得益于 async-validator ，我们可以很方便地自定义验证规则。
在配置中
{ "type": "input", ... "rules":[ { "sql": "SELECT {key} FROM balabala", "message": "xx已被占用", "trigger": "blur" } ] }
在 dynamic-form-item 组件中, 遍历 item.rules , 将sql验证转化为自定义 validator 函数:
<template> <el-form-item :rules="Rules" > ... </el-form-item> </template> <script> import request from '@/utils/request' export default { props: { item: {...} }, computed: { Rules() { const rules = this.item.rules if (rules === undefined) return undefined const R = [] rules.forEach(rule => { if (rule.sql) { const validator = (rule2, value, callback) => { // 根据项目自行修改 request('/api/validate', 'POST', { key: rule2.field, value, sql: rule.sql.replace(/{key}/ig, rule2.field) }) .then(res => { callback(!res || undefined) }) .catch(err => { this.$message.error(err.message) callback(false) }) } R.push({ validator, message: rule.message, trigger: 'blur' }) } else { R.push(rule) } }) return R } }, } </script>
3.省市区快捷配置
感谢 element-china-area-data 的作者。
在配置中:
{ "type": "cascader", ... "areaShortcut": "provinceAndCityData" }
在 dynamic-form-item 组件中:
<template> <el-form-item> ... <el-cascader :options="item.options || require('element-china-area-data')[item.areaShortcut]" ></el-cascader> </el-form-item> </template>
4.从远程加载选项
包括但不限于 radio 、 checkbox 、 cascader 、 select
在配置中:
{ "type": "checkbox", ... "optionsUrl": "/api/some/options" }
在 dynamic-form-item 组件中:
<template> <el-form-item> ... <el-select> <el-option v-for="o in item.options || ajaxOptions" ></el-option> </el-select> </el-form-item> </template> <script> import request from '@/utils/request' export default { props: { item: {...} }, computed: {...}, data() { return { ajaxOptions: [] } }, created() { const { optionsUrl, key, type } = this.item if (optionsUrl) { // 根据项目自行修改 request(`${optionsUrl}?key=${key}`, 'GET') .then(res => { this.ajaxOptions = res }) .catch(err => { this.$message.error(err.message) }) } } } </script>
总结
以上所述是小编给大家介绍的Vue+ElementUI实现表单动态渲染、可视化配置的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: