vue 實現動態表單動態渲染元件的方式(一)

2021-10-05 09:51:36 字數 994 閱讀 9131

vue 實現動態表單/動態渲染元件的方式(一)

實現demo

主元件(父元件)

此處用了自定義元件的v-model來收集子元件的資料

父元件

>

>

:model

="formdata"

>

v-for

="(item, index) in formitemlist"

:key

="index"

:label

="item.label"

>

:is=

"item.type"

v-model

="formdata[item.key]"

>

component

>

el-form-item

>

el-form

>

div>

template

>

>

//引入三個表單元件

import inputcomponent from

'./subcomponents/inputcomponent'

import selectcomponent from

'./subcomponents/selectcomponent'

import switchcomponent from

'./subcomponents/switchcomponent'

export

default,,

,], formdata:}}

, components:

, methods:

}script

>

scoped

lang

="less"

>

style

>

vue動態渲染元件

component 動態渲染元件 使用來動態渲染元件 使用方式 mycomponent component keep alive vue.component briup success vue.component briup error newvue methods changeerror chan...

vue動態生成表單元件vue form maker

vue動態生成表單元件 可以根據資料配置表單 使用的ui庫是iview 在vue裡 一般要用到什麼元件或資料 都得提前宣告 所以要根據資料來生成表單 只能使用vue的render函式 要做這乙個元件 其實並不難 看一下vue官方示例 再找個ui元件庫 差不多就能寫出來 如果對專案有興趣 可以fork...

vue路由動態增加元件渲染

做404頁面路由 使用hash可以使用 作為path 或者動態 id 但是 history 建議使用 id 作為404 重定向 雖然 可以 但是 最新版 會報錯 export const routes 12311 import tex from text 獲取如下 component resolve...