做一个多级动态表单，可以保存数据和回显数据
<template>
<div class="two">
<button class="save" @click="saveBtn">保存数据</button>
<button class="sd" @click="showBtn">回显数据</button>
<div class="all" @click="addAll()">+新增收信规则</div>
<div class="allContent" v-for="(items,index) in allList" :key="items.id">
<div class="other">
<p>{{items.name}}</p>
<input type="text" placeholder="新规则名称" v-model="items.inputTxt" />
<button class="rowDel" @click="delAll(items,index)">-</button>
</div>
<div class="otherInput">
<p>当邮件到达，满足以下条件时：</p>
<div class="top" v-for="(task,idx) in items.itemsList" :key="task.id">
<select v-model="task.type">
<option
v-for="options in typeList"
:value="options.value"
:key="options.id"
>{{options.Text}}</option>
</select>
<select v-model="task.condition">
<option :value="1">包含</option>
<option :value="0">不包含</option>
</select>
<input type="text" class="inputS" v-model="task.inputS" />
<button class="rowDelM" @click="delRow(task,items.itemsList,idx)">-</button>
<button class="rowAdd" @click="addRow(task,items.itemsList,idx)">+</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ShengMingZQTwo",
data() {
return {
typeList: [
{
id: 1,
Text: "正文",
value: "90"
},
{
id: 2,
Text: "发件人地址",
value: "99"
},
{
id: 3,
Text: "邮件主题",
value: "80"
},
{
id: 4,
Text: "发送时间",
value: "82"
},
{
id: 5,
Text: "接收时间",
value: "84"
},
{
id: 6,
Text: "附件名称",
value: "86"
}
],
allList: [
]
};
},
methods: {
// 新增所有
addAll() {
let items= {
id: 0,
name: "规则名称1",
inputTxt: "",
itemsList: [
{
id:1,
type: "90",
condition: "1",
inputS: ""
},
{
id:2,
type: "99",
condition: "0",
inputS: ""
}
]
};
if(this.allList.length>0){
items.id=this.allList.length; //key绑定
items.name="规则名称"+(this.allList.length+1);
this.allList.push(items);
}else{
this.allList=[items];
}
},
// 删除所有
delAll(item, index) {
this.allList.splice(index,1);//删除自己
},
// 删除当前行
delRow(item, itemsList, idx) {
itemsList.splice(idx,1);
},
// 添加行
addRow(item, itemsList, idx) {
console.log(idx);
itemsList.push({
type: "99",
condition: "0",
inputS: "新增"
})
},
//保存按钮
saveBtn(){
// 1、localStorage和sessionStorage不能直接保存一个对象或数组
// sessionStorage.setItem("canshu",JSON.stringify(this.allList));
// 2、vuex中缓存的数据保存需要JSON.parse(JSON.stringfy(数据));
this.$store.commit("SET_CONDITION",JSON.parse(JSON.stringify(this.allList)));
// console.log(this.allList);
},
// 回显按钮
showBtn(){
// 1
this.allList=this.$store.state.condition;
console.log(this.$store.state.condition);
// console.log(JSON.parse(localStorage.getItem("canshu")));
// this.allList=JSON.parse(sessionStorage.getItem("canshu"))
}
}
};
</script>
<style scoped>
.all {
width: 150px;
height: 38px;
line-height: 38px;
color: #fff;
background-color: blue;
margin: 0 auto;
}
.rowDel,
.rowDelM {
margin-left: 20px;
color: red;
}
select {
width: 80px;
height: 30px;
margin-left: 10px;
}
.inputS {
margin-left: 10px;
height: 25px;
}
.rowAdd {
margin-left: 10px;
}
.top {
margin-bottom: 10px;
}
</style>
在store/index.js中 ：（vuex在使用前需要npm依赖、配置）
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 必须通过 Vue.use() 安装插件
export default new Vuex.Store({
state: {
user:null,//初始状态为未登录
condition:[]
},
mutations: {
SET_USER(state,userData){
state.user=userData
},
SET_CONDITION(state,allListData){
state.condition=allListData;
}
},
actions: {
},
getters:
},
modules: {
// index: index, // 模块名必须与 mapState 中的命名空间一致
},
});
注：不管是用localStorage、或者sessionStorage或者vuex都可以存数据，就是在编辑页面回显数据需要对数组或者对象需要处理（JSON.stringfy（）、JSON.parse（））