Vue 動態(tài)生成數(shù)據(jù)字段的實例
動態(tài)生成數(shù)據(jù)字段實例
1.父組件定義data里面的數(shù)據(jù)字段
異步請求獲取數(shù)據(jù)(一種配置數(shù)據(jù),一種實際數(shù)據(jù))
data () { ? return { ? ? config: [], ? ? list: [] ? }; }
2.子組件接收數(shù)據(jù)
props: { ? config: Array, ? list: Array }, data () { ? return { ? ? newConfig: [], ? ? configLength: 0, ? ? newList: [] ? }; }
3.因為獲取數(shù)據(jù)是異步操作
因此需要監(jiān)聽數(shù)據(jù)變化,當(dāng)有數(shù)據(jù)時展示子組件
configLoaded: false, listLoaded: false
定義上面兩個變量來判斷數(shù)據(jù)是否加載完成,在異步獲取完數(shù)據(jù)后賦值為true,并監(jiān)聽
watch: { ? configLoaded (n, o) { ? ? ? ? this.configLoaded = n; ? }, ? listLoaded (n, o) { ? ? this.listLoaded = n; ? } },
4.計算屬性計算兩個變量是否均完成
并執(zhí)行v-if
computed: { ? showItem () { ? ? return this.configLoaded && this.listLoaded; ? } }, <list-item :config="config" :list="list" v-if="showItem"></list-item>
5.子組件完整代碼
<template> ? <div> ? ? <div class="item iconfont border-bottom" v-for="(item,index) of newList" :key="index"> ? ? ? <p v-for="(m,i) of item" :key="i">{{m.name}} {{m.text}}</p> ? ? </div> ? </div> </template>
<script> ? export default { ? ? name: 'Item', ? ? props: { ? ? ? config: Array, ? ? ? list: Array ? ? }, ? ? data () { ? ? ? return { ? ? ? ? newConfig: [], ? ? ? ? configLength: 0, ? ? ? ? newList: [] ? ? ? }; ? ? }, ? ? mounted () { ? ? ? this.toConfig(); ? ? }, ? ? methods: { ? ? ? toConfig () { ? ? ? ? this.configLength = this.config.length; ? ? ? ? for (let i in this.config) { ? ? ? ? ? let configItem = this.config[i]; ? ? ? ? ? this.newConfig.push({name: configItem.fieldName, text: configItem.fieldDesc}); ? ? ? ? } ? ? ? ? for (let l in this.list) { ? ? ? ? ? let item = this.list[l]; ? ? ? ? ? let childList = []; ? ? ? ? ? for (var c in this.newConfig) { ? ? ? ? ? ? let config = this.newConfig[c]; ? ? ? ? ? ? for (let key in item) { ? ? ? ? ? ? ? if (config.name === key) { ? ? ? ? ? ? ? ? childList.push({name: config.text, text: item[key]}); ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? } ? ? ? ? ? this.newList.push(childList); ? ? ? ? } ? ? ? } ? ? } ? }; </script> ? <style lang="stylus" ref="stylesheet/stylus"> </style>
表單動態(tài)生成字段
checkbox 多選,沒有默認(rèn)值的時候,一定要給一個空數(shù)組,不然就展示不出來
<el-form ref="myForm" :model="form" :rules="rules" :disabled="disabledBoolean"> <el-row> <el-col> <div v-for="(item ,index) in extendFieldColumns" :key="index" > <el-col v-if="item.type === 'input'" :span="defaultSpan"> <el-form-item :label-width="defaultLabelWidth" size="small" :rules="extendFieldRules[item.prop]" :prop="'extendField.'+item.prop" :label="item.label+':'" > <el-input v-model="form.extendField[item.prop]" :maxlength="item.maxlength" placeholder="請輸入內(nèi)容"></el-input> </el-form-item> </el-col> <el-col v-if="item.type === 'radio'" :span="defaultSpan"> <el-form-item :label-width="defaultLabelWidth" size="small" :rules="extendFieldRules[item.prop]" :prop="'extendField.'+item.prop" :label="item.label+':'" > <el-radio-group v-model="form.extendField[item.prop]" > <el-radio v-for="(option,index1) in item.dicData" :key="index1" :label="option.label" >{{option.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col v-if="item.type === 'select'" :span="defaultSpan" > <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]"> <el-select v-model="form.extendField[item.prop]" placeholder="請選擇"> <el-option v-for="(option,index2) in item.dicData" :key="index2" :label="option.label" :value="option.label"> </el-option> </el-select> </el-form-item> </el-col> <el-col v-if="item.type === 'checkbox'" :span="defaultSpan" > <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]"> <el-checkbox-group v-model="form.extendField[item.prop]" > <el-checkbox v-for="city in item.dicData" :label="city.label" :key="city.label">{{city.label}}</el-checkbox> </el-checkbox-group> </el-form-item> </el-col> <el-col v-if="item.type === 'number'" :span="defaultSpan" > <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]"> <el-input-number v-model="form.extendField[item.prop]" :max="item.maxlength" ></el-input-number> </el-form-item> </el-col> <el-col v-if="item.type === 'textarea'" :span="defaultSpan" > <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]"> <el-input v-model="form.extendField[item.prop]" :maxlength="item.maxlength" type="textarea" placeholder="請輸入內(nèi)容" > </el-input> </el-form-item> </el-col> <el-col v-if="item.type === 'date'" :span="defaultSpan" > <el-form-item :label-width="defaultLabelWidth" size="small" :prop="'extendField.'+item.prop" :label="item.label+':'" :rules="extendFieldRules[item.prop]"> <el-date-picker v-model="form.extendField[item.prop]" type="date" placeholder="選擇日期"> </el-date-picker> </el-form-item> </el-col> </div> </el-col> </el-row> </el-form>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vite項目引入Bootstrap5、bootstrap-icons方式
這篇文章主要介紹了Vue3+Vite項目引入Bootstrap5、bootstrap-icons方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06vue項目打包后上傳至GitHub并實現(xiàn)github-pages的預(yù)覽
這篇文章主要介紹了vue項目打包后上傳至GitHub并實現(xiàn)github-pages的預(yù)覽,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05