Vue elementUI 自定義表單模板組件功能實(shí)現(xiàn)
更新時(shí)間：2022年12月24日 10:47:10 作者：周圍都是小趴菜
在項(xiàng)目開(kāi)發(fā)中，我們會(huì)遇到這種需求，在管理后臺(tái)添加自定義表單，在指定的頁(yè)面使用定義好的表單，這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下
elementUI 實(shí)現(xiàn)一個(gè)自定義的表單模板組件注：該功能基于elementUI
背景：在項(xiàng)目開(kāi)發(fā)中，我們會(huì)遇到這種需求，在管理后臺(tái)添加自定義表單，在指定的頁(yè)面使用定義好的表單
直接上代碼：
<template>
<div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<div class="addBox">
<el-form :model="form" label-width="90px" ref="form" :rules="rules">
<el-form-item label="選項(xiàng)名稱" lebel-width="80" prop="label">
<el-input placeholder="請(qǐng)輸入自定義選項(xiàng)名稱" maxlength="20" clearable v-model="form.label" @input="change($event)">
</el-input>
</el-form-item>
<el-form-item label="選項(xiàng)提示" lebel-width="80" prop="tips">
<el-input @input="change($event)" placeholder="請(qǐng)輸入提示內(nèi)容" maxlength="20" clearable v-model="form.tips">
</el-input>
</el-form-item>
<el-form-item label="選項(xiàng)類型" prop="value">
<el-cascader clearable ref="cascader" v-model="value" :options="options" @change="handleChange">
</el-cascader>
</el-form-item>
<el-form-item v-if="radioCount" label="最多選幾項(xiàng)">
<el-input-number v-model="form.radioCount" controls-position="right" :min="1"></el-input-number>
<!-- <el-input type="number" v-model="form.radioCount"></el-input> -->
</el-form-item>
<el-form-item v-if="isRadio" v-for="(domain, index) in radioOptions" :key="domain.id"
:label="'添加選項(xiàng)' + (index + 1)" prop="name">
<el-row>
<el-col :span="18">
<el-input placeholder="請(qǐng)輸入選擇框選項(xiàng)" v-model="domain.name"></el-input>
</el-col>
<el-col :span="6">
<el-button @click="addType" v-if="index == 0">新增</el-button>
</el-col>
<el-col :span="6">
<el-button @click.prevent="removeType(domain)" v-if="index > 0">刪除</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'WorkspaceJsonProjectCopy',
data() {
return {
title: '新增選項(xiàng)',
isRadio: false,
value: [],
rules: {},
open: true,
radioCount: false,
form: {
radioOptions: [{}],
label: ''
},
radioOptions: [{}],
options: [{
value: "input",
label: "輸入框",
children: [{
value: "phone",
label: "手機(jī)號(hào)",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "idcard",
label: "身份證號(hào)",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "link",
label: "鏈接",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "email",
label: "郵箱",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "other",
label: "其他",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
}
]
},
{
value: "radio",
label: "選擇框",
children: [{
value: "danxuan",
label: "單選",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "duoxuan",
label: "多選",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
}
]
},
{
value: "image",
label: "圖片",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "date",
label: "日期—年月日",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
{
value: "datetime",
label: "時(shí)間—時(shí)分秒",
children: [{
value: "0",
label: "非必填"
},
{
value: "1",
label: "必填"
}
]
},
],
};
},
mounted() {
},
methods: {
change() {
this.$forceUpdate();
},
// 彈窗選擇選項(xiàng)類型
handleChange(value) {
this.value = value
if (value[0] && value[0] == 'radio' && value[1] == 'danxuan') {
this.radioOptions = [{}]
this.isRadio = true
this.radioCount = false
}
if (value[0] && value[0] == 'radio' && value[1] == 'duoxuan') {
this.radioOptions = [{}]
this.isRadio = true
this.radioCount = true
}
if (value[0] && value[0] != 'radio') {
this.radioOptions = [{}]
this.isRadio = false
this.radioCount = false
}
},
// 重置彈窗
reset() {
this.form = {}
this.value = []
this.radioOptions = [{}]
this.isRadio = false
this.radioCount = false,
this.isEdit = false
const _cascader = this.$refs.cascader
if (_cascader) {
_cascader.$refs.panel.checkedValue = [];
_cascader.$refs.panel.activePath = [];
_cascader.$refs.panel.syncActivePath()
}
this.resetForm("form");
},
// 取消彈窗
cancel() {
this.open = false;
this.form = {}
this.reset()
},
// 新增添加選擇框選項(xiàng)
addType() {
this.radioOptions.push({})
},
// 刪除新增的選擇框選項(xiàng)
removeType(item) {
var index = this.radioOptions.indexOf(item);
if (index !== -1) {
this.radioOptions.splice(index, 1);
}
},
// 獲取創(chuàng)建時(shí)間
getDate() {
var date = new Date()
var Y = date.getFullYear() + '-'
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
return Y + M + D + h + m + s
},
submitForm: function () {
var value = this.value
this.$refs["form"].validate((valid) => {
if (valid) {
if (value[0] == 'input') {
var submitData = JSON.stringify({
createTime: this.getDate(),
label: this.form.label,
type: 'input',
inputType: value[1],
mustFill: value[2],
tips: this.form.tips,
radioCount: null,
radioOption: null
})
} else if (value[0] == 'radio' && value[1] == 'danxuan') {
var options = []
this.form.radioOptions = this.radioOptions
for (var item of this.form.radioOptions) {
options.push(item.name)
}
var subOption = options.join(';')
console.log(options.join(';'))
var submitData = JSON.stringify({
createTime: this.getDate(),
label: this.form.label,
type: 'radio',
radioCount: 1,
mustFill: value[2],
radioOption: subOption,
tips: this.form.tips,
inputType: null
})
console.log(this.form.radioOptions)
} else if (value[0] == 'radio' && value[1] == 'duoxuan') {
var options = []
this.form.radioOptions = this.radioOptions
for (var item of this.form.radioOptions) {
options.push(item.name)
}
var subOption = options.join(';')
console.log(options.join(';'))
var submitData = JSON.stringify({
createTime: this.getDate(),
label: this.form.label,
type: 'radio',
mustFill: value[2],
radioOption: subOption,
tips: this.form.tips,
radioCount: this.form.radioCount,
inputType: null
})
} else if (value[0] == 'image') {
var submitData = JSON.stringify({
createTime: this.getDate(),
label: this.form.label,
type: 'image',
mustFill: value[1],
id: this.id,
tips: this.form.tips,
inputType: null,
radioCount: null,
radioOption: null
})
} else if (value[0] == 'date') {
var submitData = JSON.stringify({
createTime: this.getDate(),
label: this.form.label,
type: 'date',
mustFill: value[1],
id: this.id,
tips: this.form.tips,
inputType: null,
radioCount: null,
radioOption: null
})
} else if (value[0] == 'datetime') {
var submitData = JSON.stringify({
createTime: this.getDate(),
label: this.form.label,
type: 'datetime',
mustFill: value[1],
id: this.id,
tips: this.form.tips,
inputType: null,
radioCount: null,
radioOption: null
})
}
console.log(submitData)
}
})
},
},
};
</script>
到此這篇關(guān)于Vue elementUI 自定義表單模板組件的文章就介紹到這了,更多相關(guān)Vue elementUI 自定義表單模板組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題
這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
在vue中最常用的應(yīng)該就是axios了，這是一個(gè)很強(qiáng)大的處理ajax的庫(kù)。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述，提前安裝一下也不用我說(shuō)了吧2021-06-06
ElementUI中el-form組件的rules參數(shù)舉例詳解
Form組件提供了表單驗(yàn)證的功能,只需要通過(guò)rules屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的prop屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于ElementUI中el-form組件的rules參數(shù)的相關(guān)資料,需要的朋友可以參考下2023-10-10
Vue組件實(shí)例間的直接訪問(wèn)實(shí)現(xiàn)代碼
在組件實(shí)例中，Vue提供了相應(yīng)的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細(xì)介紹Vue組件實(shí)例間的直接訪問(wèn),需要的朋友可以參考下2017-08-08
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解
國(guó)際化是設(shè)計(jì)軟件應(yīng)用的過(guò)程中應(yīng)用被使用與不同語(yǔ)言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
在vue中v-bind使用三目運(yùn)算符綁定class的實(shí)例
今天小編就為大家分享一篇在vue中v-bind使用三目運(yùn)算符綁定class的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于Vue實(shí)現(xiàn)一個(gè)"蛇形"步驟條
在現(xiàn)代Web應(yīng)用中,步驟條作為一種常見(jiàn)的UI組件,廣泛應(yīng)用于表單提交、任務(wù)進(jìn)度以及多步驟操作等場(chǎng)景,下面我們來(lái)看看如何利用Vue實(shí)現(xiàn)一個(gè)蛇形步驟條吧2024-11-11
vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable的問(wèn)題及解決
這篇文章主要介紹了vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09