vue elementui动态添加el-input实例代码
作者：季布，
最近遇到一个新的需求,需要动态添加el-input,这篇文章主要给大家介绍了关于vue elementui动态添加el-input的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
点击加号或者减号按钮可以实现动态增减Input输入框
<el-form label-width="auto" :model="infomation">
<div v-for="(item, index) in infomation.infolist" :key="index">
<el-form-item label="学校名称">
<el-select
v-model="item.schoolname"
clearable
placeholder="Select"
filterable
allow-create
collapse-tags-tooltip
default-first-option
:reserve-keyword="false"
>
<el-option
v-for="(item, index) in school_list"
:key="index"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item label="选择专业">
<el-select
v-model="item.major"
placeholder="Select"
multiple
collapse-tags
allow-create
collapse-tags-tooltip
filterable
default-first-option
:reserve-keyword="false"
>
<el-option
v-for="(item, index) in major_list"
:key="index"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item label="链接">
<el-input v-model="item.link" />
</el-form-item>
<el-form-item>
<el-button @click="addItem()"> + </el-button>
<el-button
@click="deleteItem(index)"
>
–
</el-button>
</el-form-item>
</div>
</el-form><script>
import request from "../utils/request";
export default {
name: "InView",
data() {
return {
infomation: {
infolist: [{ schoolname: "", major: "", link: "" }],
},
};
methods: {
// 新增任务分配
addItem() {
let that = this;
that.infomation.infolist.push({
schoolname: "",
major: "",
link: "",
});
}，
deleteItem(i) {
if (this.infomation.infolist.length <= 1) {
return false;
}
this.infomation.infolist.splice(i, 1);
},
</script>还有另一种场景: 一个学校对应多个专业，而多个专业会对应多个链接
<template>
<div>
<el-form label-width="auto" :inline="true">
<div v-for="(item, schoolIndex) in schoolList" :key="schoolIndex" class="zhuanye">
<el-form-item label="学校名称">
<el-select v-model="item.schoolname" clearable placeholder="Select" filterable allow-create
collapse-tags-tooltip default-first-option :reserve-keyword="false">
<el-option v-for="(item, index1) in school_list" :key="index1" :label="item" :value="item" />
</el-select>
</el-form-item>
<div>
<div v-for="(item, zhuanyeIndex) in item.zhuanye" :key="zhuanyeIndex" class="zhuanye">
<el-form-item label="选择专业">
<el-select v-model="item.major" placeholder="Select" multiple collapse-tags allow-create
collapse-tags-tooltip filterable default-first-option :reserve-keyword="false">
<el-option v-for="(item, index2) in major_list" :key="index2" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="addzhuanye(schoolIndex)"> + 专业</el-button>
<el-button @click="deletezhuanye(schoolIndex, zhuanyeIndex)">
–
</el-button>
</el-form-item>
<el-form-item label="链接">
<el-input v-model="item.link" style="width: 180px" size="mini" />
</el-form-item>
</div>
</div>
<el-form-item>
<el-button @click="addSchool()"> + 学校</el-button>
<el-button @click="deleteSchool(schoolIndex)">
–
</el-button>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: "InView",
data() {
return {
schoolList: [{ schoolname: '学校1', zhuanye: [{ major: '', link: '' }] }],
school_list: [],
major_list: []
};
},
created() {
},
methods: {
addzhuanye(index) {
this.schoolList[index].zhuanye.push({ major: '', link: '' })
},
deletezhuanye(schoolIndex, zhuanyeIndex) {
this.schoolList[schoolIndex].zhuanye.splice(zhuanyeIndex, 1)
},
addSchool() {
this.schoolList.push({ schoolname: '默认添加学校', zhuanye: [{ major: '', link: '' }] })
},
deleteSchool(index) {
this.schoolList.splice(index, 1)
}
},
};
</script>
<style scoped>
.zhuanye {
display: flex;
}
</style>总结
到此这篇关于vue elementui动态添加el-input的文章就介绍到这了,更多相关elementui动态添加el-input内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！