vue elementui 动态追加下拉框、输入框功能
作者:盐多碧咸。。
这篇文章主要介绍了vue elementui 动态追加下拉框、输入框功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
vue elementui 动态追加下拉框、输入框
上代码:
<template> <div> <el-dialog append-to-body :close-on-click-modal="false" :close-on-press-escape="false" width="65%" @close="onClose" :modal-append-to-body="true" title="新建" custom-class="dialogBox" :visible.sync="dialogVisible" :lock-scroll="true" :destroy-on-close="true"> <el-form :model="combinationInfo" label-width="90px" ref="combinationForm" :rules="rules" :inline="true" size="small"> <el-row> <el-col :span="12"> <el-form-item prop="benchMarks" label="名称"> <div style="color: #fb6b3f;width: 230px;">比例之和需为100%(当前 <span>{{benchmarkTotal}}</span> <span></span>%) </div> <div v-for="(item,index) in combinationInfo.benchMarks" :key="index"> <el-select style="margin-bottom: 10px;" clearable filterable collapse-tags placeholder="请选择" class="benchmarkSelectWidth" @change="changeBenchmark" v-model="item.code" > <el-option v-for="(item1, idx) in list" :key="idx" :label="item1.name" :value="item1.code" > </el-option> </el-select> <el-input v-model="item.percentage" @input="changePercentage" placeholder="请输入" class="benchmarkInputWidth"></el-input> <span style="padding-left: 2px;">%</span> <i v-if="index !== 0" style="font-size: 18px;cursor: pointer;padding: 0 0 0 10px;color: #F56C6C;" @click="deleteIndex(index)" class="el-icon-remove-outline"></i> </div> <div v-if="benchmarkRule" style="color: #F56C6C;font-size: 12px;margin-top: -17px">请选择名称</div> <el-button @click="addIndex" size="mini" type="primary" icon="el-icon-plus">添加</el-button> </el-form-item> </el-col> <el-col :span="12"> </el-col> </el-row> </el-form> <div style="text-align: right;margin-top: 20px;"> <el-button size="mini" @click="onClose()">取 消</el-button> <el-button size="mini" type="primary" @click="onConfirm()" >提 交</el-button > </div> </el-dialog> </div> </template>
data() { return { dialogVisible: false, combinationInfo: { benchMarks: [ { code: '', name: '', percentage: '', } ] }, rules: { benchMarks: [{ required: true }], }, benchmarkRule: false, benchmarkTotal: 0, list: [ { name: 'aaa', code: '111', }, { name: 'bbb', code: '222', }, { name: 'ccc', code: '333', }, ], } }, methods: { // 添加 addIndex () { this.combinationInfo.benchMarks.push({ code: '', percentage: '', }) }, // 删除 deleteIndex (index) { this.combinationInfo.benchMarks.splice(index,1) this.changePercentage() }, changeBenchmark (val) { if (this.combinationInfo.benchMarks.length && this.combinationInfo.benchMarks.length > 1) { if (!this.isRepeat(this.combinationInfo.benchMarks,'code')) { this.$message.warning('所选名称不能重复!') return } } }, // 判断数组中是否有重复数据(true 不存在;false 存在重复) isRepeat(arr, key) { var obj = {}; for (let i = 0; i < arr.length; i ++) { if (obj[arr[i][key]]) { return false; // 存在 } else { obj[arr[i][key]] = arr[i]; } } return true; }, // 名称值变化时 changePercentage (val) { this.benchmarkTotal = 0 if (this.combinationInfo.benchMarks.length && this.combinationInfo.benchMarks.length > 0) { for(let i = 0; i < this.combinationInfo.benchMarks.length; i++) { if (this.combinationInfo.benchMarks[i].percentage === '') { break } this.benchmarkTotal+=parseFloat(this.combinationInfo.benchMarks[i].percentage) } } }, // 提交 onConfirm() { if (this.combinationInfo.benchMarks) { for(let i = 0; i< this.combinationInfo.benchMarks.length; i++) { if (this.combinationInfo.benchMarks[i].code) { this.benchmarkRule = false } else { this.benchmarkRule = true return } } } if (this.benchmarkTotal !== 100) { this.$message.warning('名称比例之和需为100%!') return } }, // 取消 onClose() { this.benchmarkRule = false this.dialogVisible = false }, },
展示效果图:
到此这篇关于vue elementui 动态追加下拉框、输入框的文章就介绍到这了,更多相关vue elementui 追加下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!