vue elementui 动态追加下拉框、输入框
上代码:
html
<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>
javascript
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
},
},
展示效果图: