极客观点
项目管理
HarmonyOS
最近刚上手vue，使用vue和Element-UI做了一个简单的多条件筛选列表，功能如下图：
“筛选条件1”和“筛选条件2”都是组件SelectionConditionList生成的，点击“新建任务”会增加一个“筛选条件n”。
当我增加多条“筛选条件”后，每条筛选条件都选中一个条件类型，如下图：
此时，当我删除“筛选条件2”时，诡异的事情发生了：
可以看到，序号确实是“筛选条件2”没有了，但是内容“筛选条件2”的“注册时间”仍然存在，而消失的是最后一条筛选条件“消费点位”。
从console.log的打印信息也能看出，实际是序号4的内容被删除了。我的代码自己查了好多遍了，看不出问题出在什么地方，我把代码贴出来，求大神帮忙理理是哪里出错了？
1，主文件 UserSelectionTask.vue
<template>
<div class="content-body">
<div class="line-title">优惠券系统/添加用户筛选任务</div>
<el-form ref="form" :model="form" label-width="100px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="任务名称">
<el-input v-model="form.inputTaskName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参考任务">
<el-select v-model="form.selectRefTask" placeholder="请选择" @change="selectRefTaskSC">
<el-option
v-for="item in refTaskOptions"
:label="item.label"
:value="item.value"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="验证手机号码"><el-input v-model="form.inputVerifyPhoneNumber"></el-input></el-form-item>
</el-col>
<el-col :span="12">
<el-button plain icon="el-icon-circle-plus-outline" @click="addTaskVerifyPhone">加入</el-button><el-button plain icon="el-icon-close">删除</el-button><el-button plain icon="el-icon-delete">清空</el-button>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="20">
<el-form-item label=" ">
<el-input type="textarea" :rows="6" readonly v-model="form.phoneNumbersTextArea"></el-input>
</el-form-item>
</el-col>
</el-row>
<div>
<v-selection-condition-list v-for="item in selectionConditionList" :key="item.id" :condition-index="item.index" :dom-show="item.show" @delete="deleteSelectionCondition"></v-selection-condition-list>
</div>
<div class="div_center">
<el-button type="warning" plain>取消任务</el-button> <el-button type="primary" plain @click="addNewSelectionTask">新建任务</el-button> <el-button type="primary" plain>提交任务</el-button>
</div>
</el-form>
</div>
</template>
<script>
/* eslint-disable */
import vSelectionConditionList from './SelectionConditionList'
export default
{
data()
{
return {
selectionConditionList:[ {index:1,show:false}],
form: {
inputTaskName: '',
selectRefTask: '',
inputVerifyPhoneNumber: '',
phoneNumbersTextArea: ''
},
refTaskOptions: [
{
value: '17年10月W1任务',
label: '17年10月W1任务'
},
{
value: '18年1月W2任务',
label: '18年1月W2任务'
},
{
value: '18年2月W3任务',
label: '18年2月W3任务'
}]
}
},
methods: {
// 添加验证手机号码
addTaskVerifyPhone(){
},
// 参考条件选中值发生变化时触发
selectRefTaskSC(re)
{
// re: 目前的选中值
this.form.inputTaskName = re;
},
// 添加新的用户筛选条件
addNewSelectionTask(){
var len = this.selectionConditionList.length;
this.selectionConditionList.push({index:len+1});
// console.log(this.selectionConditionList)
},
// 删除用户筛选条件
deleteSelectionCondition(index){
console.log("delete..."+index);
this.selectionConditionList.splice(index-1,1);
// console.log(this.selectionConditionList);
var len = this.selectionConditionList.length;
/* for(var i=0;i<len;i++){
this.selectionConditionList[i].index = i+1;
}*/
}
},
components:{
vSelectionConditionList
}
}
</script>
<style>
.div_center {
text-align: center;;
width:100%;
margin:0 auto;
}
</style>
2，筛选条件组件文件 SelectionConditionList.vue
<template>
<div class="content-body">
<el-row :gutter="10">
<el-col :span="4">
<div class="text select-txt">筛选条件{{ myConditionIndex }} <i class="el-icon-close" @click="deleteCondition" v-show="myDomShow"></i></div>
</el-col>
<el-col :span="8">
<el-form-item label="逻辑关系" v-show="myDomShow">
<el-select v-model="form.logicType" placeholder="请选择" @change="logicSC" class="logic-select">
<el-option
v-for="item in logicTypeOptions"
:label="item.label"
:value="item.value"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="条件类型">
<el-select v-model="form.conditionType" placeholder="请选择" @change="conditionTypeSC">
<el-option
v-for="item in conditionTypeOptions"
:label="item.label"
:value="item.value"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="条件类型">
<el-input v-model="form.inputConditionName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
</div>
</template>
<script>
/* eslint-disable */
export default
{
props:{
conditionIndex:{type:Number}, domShow:{type:Boolean,default:true},inputName:{type:String}
},
data()
{
return {
myConditionIndex:this.conditionIndex,
myDomShow:this.domShow,
form: {
conditionType:'',
logicType:'',
inputConditionName:''
},
logicTypeOptions: [{
value: '且',
label: '且'
}, {
value: '和',
label: '和'
}, {
value: '排除',
label: '排除'
}],
conditionTypeOptions: [{
value: '楼宇点位',
label: '楼宇点位'
}, {
value: '注册时间',
label: '注册时间'
}, {
value: '最近消费商品',
label: '最近消费商品'
}, {
value: '消费点位',
label: '消费点位'
}, {
value: '付费时间',
label: '付费时间'
}, {
value: '消费城市',
label: '消费城市'
}, {
value: '企业导入',
label: '企业导入'
}, {
value: '已有任务',
label: '已有任务'
}, {
value: '杯均价',
label: '杯均价'
}, {
value: '消费频次',
label: '消费频次'
}, {
value: '导入用户',
label: '导入用户'
}]
}
},
destroyed()
{
console.log("name.."+this.form.inputConditionName+"..id.."+this.conditionIndex);
},
methods: {
// 选择筛选条件
conditionTypeSC(re)
{
// re: 目前的选中值
this.form.inputConditionName = re;
console.log("name.."+this.form.inputConditionName+"..id.."+this.conditionIndex);
},
// 选择逻辑关系
logicSC(re){
},
// 删除此筛选条件
deleteCondition(){
this.$emit('delete',this.myConditionIndex);
}
},
watch:{
conditionIndex(val){
this.myConditionIndex = val;
},
domShow(val){
this.myDomShow = val;
}
}
}
</script>
<style>
.logic-select {
width:100px;
}
</style>
全部文件网盘下载链接: https://pan.baidu.com/s/1mjM7Jjq 密码: yspj
看这个问题下面，@monster1935 的回答，讲到点子上了。