<Element-ui el-form>動態新增表單項-el-select
阿新 • • 發佈:2020-12-09
1.場景描述,根據下拉選擇框,選定某個值然後動態新增一個下拉框2
目錄
1.場景描述,根據下拉選擇框,選定某個值然後動態新增一個下拉框2
<template> <div> <template> <el-form ref="form" :model="form" label-width="80px" class="demo-dynamic"> <el-form-item label="活動名稱"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="模式"> <el-select v-model="form.region" placeholder="請選擇模式"> <el-option v-for="item in selectmode" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <div v-show="form.region === 'repair'"> <el-form-item label="修復模式"> <el-select v-model="form.region2" placeholder="請選擇選項"> <el-option v-for="item in selectmode2" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> </div> <el-form-item label="活動時間"> <el-col :span="11"> <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item label="即時配送"> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活動性質"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox> <el-checkbox label="地推活動" name="type"></el-checkbox> <el-checkbox label="線下主題活動" name="type"></el-checkbox> <el-checkbox label="單純品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊資源"> <el-radio-group v-model="form.resource"> <el-radio label="線上品牌商贊助"></el-radio> <el-radio label="線下場地免費"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活動形式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即建立</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </template> </div> </template> <script> export default { data() { return { form: { name: '', region: '', region2: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, selectmode: [ { value: 'repair', label: '修復' }, { value: 'append', label: '追加' }, { value: 'overwirtte', label: '覆蓋' } ], selectmode2: [ { value: 'repair1', label: '選項1' }, { value: 'append2', label: '選項2' }, { value: 'overwirtte3', label: '選項3' } ] } } } </script> <style lang="scss" scoped></style>
2.完整程式碼
<template> <div class="profile"> <el-main> <el-button type="primary" @click="centerDialogVisible = true">彈框按鈕</el-button> </el-main> <div> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item label="下拉框" prop="typeSelect"> <el-select v-model="dynamicValidateForm.typeSelect" placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <div v-show="dynamicValidateForm.typeSelect === 0" v-for="item in array" :key="item.index"> <el-form-item label="輸入項"> <input type="text" class="select_first input_common input_border_right" readonly="true" v-model="item.selectNumber" /> <input type="text" class="select_two input_common input_border_left" readonly="true" v-model="item.selectText" /> <span class="select_three input_common input_border_right">扣分:</span> <input type="number" class="select_four input_common input_border_left" v-model="item.selectInput" /> </el-form-item> </div> <div v-show="dynamicValidateForm.typeSelect === 2" v-for="(item, index) in newarray" :key="index"> <el-form-item label="修復型別"> <el-select v-model="item.selectText" placeholder="請選擇"> <el-option v-for="item in repForm" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </div> <el-form-item> <span> <el-button @click="centerDialogVisible = false">取 消</el-button> <el-button type="primary" @click="submit">確 定</el-button> </span> </el-form-item> </el-form> </div> <!-- <el-dialog title="增加刪除元素" :visible.sync="centerDialogVisible" width="50%" center> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item label="下拉框" prop="typeSelect"> <el-select v-model="dynamicValidateForm.typeSelect" placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <div v-show="dynamicValidateForm.typeSelect === 0" v-for="item in array" :key="item.index"> <el-form-item label="輸入項"> <input type="text" class="select_first input_common input_border_right" readonly="true" v-model="item.selectNumber" /> <input type="text" class="select_two input_common input_border_left" readonly="true" v-model="item.selectText" /> <span class="select_three input_common input_border_right">扣分:</span> <input type="number" class="select_four input_common input_border_left" v-model="item.selectInput" /> </el-form-item> </div> <div v-show="dynamicValidateForm.typeSelect === 1" v-for="(item, index) in newarray" :key="index"> <el-form-item label="輸入項"> <input type="text" class="select_first input_common input_border_right" readonly="true" v-model="item.selectNumber" /> <input type="text" class="select_two input_common input_border_left" readonly="true" v-model="item.selectText" /> <span class="select_three input_common input_border_right">扣分:</span> <input type="number" class="select_four input_common input_border_left" v-model="item.selectInput" /> <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(item.index)"></el-button> <el-button type="primary" icon="el-icon-edit" circle v-if="newarray.length - 1 === index" @click="add"></el-button> </el-form-item> </div> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="centerDialogVisible = false">取 消</el-button> <el-button type="primary" @click="submit">確 定</el-button> </span> </el-dialog> --> </div> </template> <script> const TYPE = ['A.', 'B.', 'C.', 'D.', 'E.', 'F.'] //import HeaderTop from '../../components/HeaderTop.vue' export default { name: 'profile', components: { //HeaderTop }, data() { return { centerDialogVisible: false, dynamicValidateForm: { typeSelect: '', type: [] }, repForm: [ { value: 0, label: '修復項1' }, { value: 1, label: '修復項2' }, { value: 3, label: '修復項3' } ], options: [ { value: 0, label: '覆蓋' }, { value: 1, label: '追加' }, { value: 2, label: '修復' } ], array: [ { selectNumber: 'A.', selectText: '是', selectInput: '' }, { selectNumber: 'B.', selectText: '否', selectInput: '' } ], newarray: [ { selectText: '' } ] } }, created() { this.onchangeSelect() }, methods: { // 賦值字母 // onchangeSelect() { // this.newarray = this.newarray.map((item, index) => { // item.selectNumber = TYPE[index] // return item // }) // }, // 增加 add() { if (this.newarray.length + 1 > 6) { this.$alert('最多輸入6項') return } else { this.newarray.push({ index: this.newarray.length, value: '' }) } this.onchangeSelect() }, // 刪除 deleteData(index) { if (this.newarray.length - 1 < 3) { this.$alert('至少輸入3項') return } else { this.newarray.splice(index, 1) } this.onchangeSelect() }, submit() { console.log(this.array) console.log(this.newarray) } } } </script> <style scoped> .profile { width: 100%; height: 100%; overflow: auto; } /* 每個input都有 */ .input_common { border: 1px solid rgba(205, 205, 205, 1); border-radius: 2px; } /* 2,4 */ .input_border_left { border-left: none; margin-left: -5px; } /* 1,3 */ .input_border_right { border-right: none; } .select_first { width: 25px; height: 34px; padding-left: 10px; } .select_two { width: 55px; height: 33px; padding-bottom: 1px; } .select_three { padding: 7px 0px 8px 10px; } .select_four { width: 100px; height: 34px; } </style>