Vue -- 動態表單組件 · Vue&&TypeSprict--基礎總結

>[success] # 動態表單組件 ~~~ 1.公司有個項目需求是用戶可以拖拽，自己定義表單內容然后根據自己的需求做自己的表單驗證和表單的打印 2.整套代碼我雖然不是動態表單組件的模塊的開發人員，也大概看了這部分代碼，我們公司的思路是通過'element-ui' 提供的組件基礎上我們吧需要的對應字段和'form-item' 放到一起變成一個自定義的組件，相比下面我通過'思否'學到的這種相比，我們的好處這是在定制化程度上可能略高，實際體驗和代碼感覺略差，后續有機會，也會簡單整理一下我們公司這套分享出來 3.下面會主要對'思否' 這套進行說明 ~~~ >[info] ## 創建動態組件準備 -- 數據渲染表單字段篇 ~~~ 1.需要知道'vue' 提供的動態組件'component' 和'is' 相關知識 2.需要了解'element-ui' 或者'iview-ui' , 接下來的內容是通過'iview-ui' 做的講解說明 3.要知道表單組件整體分類，在這里我個人給表單組件分成兩種， '普通組件' 和 '組合組件'，'普通組件'指的就是那些不需要配合直接使用的，例如'input','組合組件' 指的是那些其實是兩個部分或者多個部分整合一起才能構成一個表單項，例如'select' 給和'option'一起才能使用 4.動態組件需要和后臺規定好各自所需要的字段，下面的案例規定方式不是唯一方式，可以根據實際需求來自行規定 5.這里將動態組件分成兩個版本，第一個版本就是普通用來渲染，第二個是加上了驗證，拆成兩個版本主要是為了方便理解 ~~~ >[danger] ##### 在views 文件下創建視圖組件 -- FormTest.vue ~~~ 1.在vue的視圖組件文件下創建一個任意的vue文件 ~~~ ~~~ 1.創建一個動態表單組件'form-group' 2.用formList 模擬后臺返回數據 2.1 name -- 用來做驗證的key 2.2 type -- 組件類型為了動態組件渲染時候使用 2.3 value -- 顯示返回的內容值，例如input 需要綁定的v-model 就是這個value 2.4 label -- 在form-item 用來展示字段文字 2.5 children -- 組合組件 3.這里使用的是iview的ui，因此type 這里對應好相應的iview組件 4.在整個formList 模型中注意他們type對應的組件在去iview 文檔中查詢自己需要的屬性即可 5.簡單組件例如input 和 range一類他們只需要單個配合即可渲染，復雜的例如select 需要配合 option等多個組合，因此數據結構也會略微需要調整，可以對這種組合形式組件增加自己以用來識別定義的字段'children'，或者根據需求自定義自己想要的 6.例如radio 和 checkbox 無論是在iview 還是在element 他們看似是一個組件構成但實際他們用起來也可以說是組合組件的存在，他們都有一個 group 組的存在 ~~~ ~~~ <template> <div> <form-group :list="formList" :url="url"></form-group> </div> </template> <script> import FormGroup from '@/components/form-group' export default { name: 'FormTest', components: { FormGroup, }, data(){ return { url: '/data/formData', formList:[{ name:'name', type:'i-input', value:'', label:'姓名', rule:[ { required: true, message: 'The name cannot be empty', trigger: 'blur' } ], },{ name:'range', type:'slider', value:[10,40], range:true, label:'范圍' },{ name:'select', type:'i-select', value:'', label:'性別', children:{ type:'i-option', list:[ {value:'man',title:'男'}, {value:'woman',title:'女'}, ] } },{ name:'education', type:'radio-group', value:1, label:'學歷', children:{ type:'radio', list:[ {label:'man',title:'男'}, {label:'woman',title:'女'}, ] } },{ name:'skill', type:'checkbox-group', value:[], label:'技能', children:{ type:'checkbox', list:[ {label:'man',title:'大學'}, {label:'woman',title:'高中'}, ] } }] } } } </script> ~~~ >[danger] ##### 在components 文件下動態渲染表單組件 -- form-group.vue（無驗證版） ~~~ 1.動態組件 -- component 是vue自帶的 2.雖然使用了vue自帶的component，但這里要注意因為不同類型的表單所需要的渲染屬性也是略有區別的，因此需要合理設計,例如這里的range 就是針對iview的范圍組件range才加上的屬性 3.真對簡單類型的組件例如:'input' 和 'range' 等只需要,數據匹配正確利用'componet' 即可動態生成: <component :is="item.type" :range="item.range" v-model="item.value"></component> 4.針對復雜的例如select 等這里就涉及到需要使用多個'component' 組件進行渲染 5.小技巧利用_uid 和 index 搭配生成唯一的 key ~~~ ~~~ <template> <Form :lable-width="lableWidth"> <FormItem v-for="(item,index) in list" :label="item.label" label-position="left" :key = "`${_uid}_${index}`" > <component :is="item.type" :range="item.range" v-model="item.value">  <template v-if="item.children"> <component v-for="(child,i) in item.children.list" :key="`${_uid}_${index}_${i}`" :value="child.value" :label="child.label" :is="item.children.type" > {{child.title}} </component> </template> </component> </FormItem> </Form> </template> <script> /** * 1.list 接受從父組件傳遞過來的定義渲染接口的內容值 * 2.利用動態根據傳遞過來的list 中的type 進行組件渲染 * 3.小技巧利用_uid 和 index 搭配生成唯一的 key **/ export default { name: "FormGroup", props:{ list:{ type:Array, default:()=>{} }, lableWidth:{ type:Number, default:100 } } } </script> <style scoped> </style> ~~~ >[danger] ##### 在components 文件下動態渲染表單組件 -- form-group.vue（有驗證版） ~~~ 1.做表單驗證前需要思考，整個項目結構邏輯，需要一個'重置按鈕'， ,因為數據還需要和'Form'組件進行匹配，'Form'組件需要'rules', 'model',因此還需要將數據重洗 2.根據上面分析因此在'data' 中定義了幾個參數分別是： 2.1 initValueObj -- 重置時候需要的數據保存參數 2.2 rules -- 驗證規則的保存位置 2.3 valueObj -- 給Form 組件model 數據存儲 2.4 errorStore -- 后臺返回的錯誤信息展示用的 3.因為這里用的是'valueObj' 存儲最后提交表單的值，也因此在動態組件渲染的時候也要變成從這個對象去拿對應值即可 4. 表單提交的時候，變化的是接口url，因此實際我們可以，在使用動態組件頁，傳遞一個動態的url，讓整個動態組件做一個內置提交功能 ~~~ ~~~ <template> <Form :lable-width="lableWidth" v-if="Object.keys(valueObj).length" :rules="rules" :model="valueObj"> <FormItem v-for="(item,index) in list" :label="item.label" :prop="item.name" label-position="left" :error="errorStore[item.name]" @click.native="handleFocus(item.name)" :key = "`${_uid}_${index}`" > <component :is="item.type" :range="item.range" v-model="valueObj[item.name]">  <template v-if="item.children"> <component v-for="(child,i) in item.children.list" :key="`${_uid}_${index}_${i}`" :value="child.value" :label="child.label" :is="item.children.type" > {{child.title}} </component> </template> </component> </FormItem> <FormItem>  <Button @click="handleReset">重置</Button> </FormItem> </Form> </template> <script> import clonedeep from 'clonedeep' // import { sentFormData } from '@/api/data' export default { name: "FormGroup", props:{ list:{ type:Array, default:()=>{} }, lableWidth:{ type:Number, default:100 }, url: { type: String, required: true } }, data(){ return{ initValueObj:{}, rules:{}, valueObj:{},// 給model errorStore: {} } }, watch: { list () { this.setInitValue() } }, methods:{ setInitValue(){ let initValueObj={} let rules={} let valueObj={} let errorStore = {} this.list.forEach(item => { rules[item.name] = item.rule initValueObj[item.name] = item.value valueObj[item.name] = item.value }) this.rules = rules this.valueObj = valueObj this.initValueObj = initValueObj this.errorStore = errorStore }, handleReset () { this.valueObj = clonedeep(this.initValueObj) }, handleFocus (name) { this.errorStore[name] = '' }, handleSubmit () { this.$refs.form.validate(valid => { if (valid) { sentFormData({ url: this.url, data: this.valueList }).then(res => { this.$emit('on-submit-success', res) }).catch(err => { this.$emit('on-submit-error', err) for (let key in err) { this.errorStore[key] = err[key] } }) } }) }, }, mounted () { this.setInitValue() } } </script> <style scoped> </style> ~~~ * 上面使用的api寫法 ~~~ export const sentFormData = ({ url, data }) => { return axios.request({ url, data, method: 'post' }) } ~~~