vue elementui 动态添加 el-input
【代码】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>
更多推荐
已为社区贡献11条内容
所有评论(0)