在做删除的时候我们删除了后台数据,不想在对数据进行查询更新,此时可以在前端对数组进行删除
示例:
list:[
{
id:0
name:'xiaomin'
},
{
id:1
name:'xiaohong'
},
]
list = list.filter(item => item.id !== 你要删除的ID)
具体案例如下:
code处理方法
// 双击那个车站 取消哪个
clickStationCancel(stationId){
console.log("stationId:", stationId, this.selectedLineData);
this.selectedLineData.map(v=>{
if (v.stationList) {
v.stationList.map(k=>{
v.stationList = v.stationList.filter(item => item.station.tccStationId !== stationId)
})
}
})
console.log("resultData:", this.selectedLineData);
this.selectedLineData = JSON.parse(JSON.stringify(this.selectedLineData));
},
// 双击线路 取消本条线路的
clickLineCancel(lineId){
console.log("lineId:",lineId);
let newData = this.selectedLineData;
newData = newData.filter(item => item.lineInfo.lineId !== lineId);
this.selectedLineData = JSON.parse(JSON.stringify(newData));
console.log("selectedLineData:", this.selectedLineData);
}
全部代码如下: (有需要的可以用vue项目测试一下,包括前2天发布的特殊数据结构组装处理)
<template>
<!-- 已选线路/车站/分区 -->
<Modal v-model="modal3" :mask-closable="false" width="900" title="测试">
<div id="lineStationZone">
<Span style="width:100%;float:left;">已选线路/车站/分区</Span>
<div class="question" z-index="1002">
<div class="select_circuit" v-for="(item, index) in selectedLineData" :key="index">
<span class="select_line" @dblclick="clickLineCancel(item.lineInfo.lineId)" v-if="item.stationList.length > 0 "> {{item.lineInfo.lineName}} </span>
<div class="select_station">
<ul v-for="(list, i) in item.stationList" :key="i">
<li>
<Poptip word-wrap trigger="hover" placement="top" z-index="1003" :title="list.station.stationSname + '/' + '分区:'" width="300" v-if="list.station !== null">
<span class="stand" @dblclick="clickStationCancel(list.station.tccStationId)" >{{ list.station.stationSname}}</span>
<span class="district" :class="[list.itemChecked.length == 0 ? 'district_0' : 'district_1']">共{{list.itemChecked.length}}个分区</span>
<div slot="content">
<div class="poptip_line" v-if="list.broadcastSubareaInfo.length > 0">
<el-checkbox-group v-model="list.itemChecked" @change="poptip_checkedChange">
<el-checkbox-button v-for="i in list.broadcastSubareaInfo" :label="i.areaId" :key="i.areaId">
{{i.areaName}}
</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
</Poptip>
</li>
</ul>
</div>
</div>
</div>
</div>
</Modal>
</template>
<script>
export default {
data(){
return {
modal3: false,
selectedLineData: [],
result_checked: [], //最后所有被选中的值
}
},
methods:{
// 已选线路/车站/分区选中
poptip_checkedChange(data) {
console.log("poptip 分区选中:", data);
//回显全部选中
let checked = [];
this.selectedLineData.map(v=>{
v.stationList.map(k=>{
k.itemChecked.map(m=>{
checked.push(m);
})
})
})
checked = [...new Set(checked)];
console.log("checked:", checked);
},
// 双击那个车站 取消哪个
clickStationCancel(stationId){
console.log("stationId:", stationId, this.selectedLineData);
this.selectedLineData.map(v=>{
if (v.stationList) {
v.stationList.map(k=>{
v.stationList = v.stationList.filter(item => item.station.tccStationId !== stationId)
})
}
})
console.log("resultData:", this.selectedLineData);
this.selectedLineData = JSON.parse(JSON.stringify(this.selectedLineData));
},
// 双击线路 取消本条线路的
clickLineCancel(lineId){
console.log("lineId:",lineId);
let newData = this.selectedLineData;
newData = newData.filter(item => item.lineInfo.lineId !== lineId);
this.selectedLineData = JSON.parse(JSON.stringify(newData));
console.log("selectedLineData:", this.selectedLineData);
}
},
created(){},
mounted(){
// 后台返回的数据
let historyData = {
"0637":[
{
"areaId": "04010637100000001",
"areaName": "分区001",
"areaType": "1",
"lineId": "06",
"lineName": "6号线",
"stationName": "南锣鼓巷",
"stationId": "0637",
"boardAreaNo": 1
}, {
"areaId": "04010637100000002",
"areaName": "分区002",
"areaType": "1",
"lineId": "06",
"lineName": "6号线",
"stationName": "南锣鼓巷",
"stationId": "0637",
"boardAreaNo": 1
}, {
"areaId": "04010637100000003",
"areaName": "分区003",
"areaType": "1",
"lineId": "06",
"lineName": "6号线",
"stationName": "南锣鼓巷",
"stationId": "0637",
"boardAreaNo": 1
}
],
"0639":[
{
"areaId": "04010639100000001",
"areaName": "分区01",
"areaType": "1",
"lineId": "06",
"lineName": "6号线",
"stationName": "东四",
"stationId": "0639",
"boardAreaNo": 1
}, {
"areaId": "04010639100000002",
"areaName": "分区02",
"areaType": "1",
"lineId": "06",
"lineName": "6号线",
"stationName": "东四",
"stationId": "0639",
"boardAreaNo": 1
}, {
"areaId": "04010639100000003",
"areaName": "分区03",
"areaType": "1",
"lineId": "06",
"lineName": "6号线",
"stationName": "东四",
"stationId": "0639",
"boardAreaNo": 1
}
],
"0201":[
{
"areaId": "04010201100000001",
"areaName": "分区1",
"areaType": "1",
"lineId": "02",
"lineName": "2号线",
"stationName": "西直门",
"stationId": "0201",
"boardAreaNo": 1
},
{
"areaId": "04010201100000002",
"areaName": "分区2",
"areaType": "1",
"lineId": "02",
"lineName": "2号线",
"stationName": "西直门",
"stationId": "0201",
"boardAreaNo": 1
}
]
};
let resultAllData = [];
let resultStation = [];
let lines = [];
for(let k in historyData) {
let station = {
broadcastSubareaInfo: [],
itemChecked: []
};
let lineId = '';
let lineName = '';
historyData[k].map(v => {
station.broadcastSubareaInfo.push({
areaId: v.areaId,
areaName: v.areaName
})
station.itemChecked.push(v.areaId)
station.station = {
tccStationId: v.stationId,
stationSname: v.stationName
}
lineId = v.lineId
lineName = v.lineName
})
resultStation.push({
lineInfo: {
lineId: lineId,
lineName: lineName,
},
stationList: station
})
lines.push(lineId);
}
lines = [...new Set(lines)];
lines.map(line => {
let station = [];
let lineInfo = {};
resultStation.map(v => {
if( line == v.lineInfo.lineId) {
station.push(v.stationList);
lineInfo = v.lineInfo;
}
})
resultAllData.push({
lineInfo: lineInfo,
stationList: station
})
})
console.log("组合后的数据:", resultAllData);
this.selectedLineData = resultAllData;
},
destroyed(){
this.$destroy();
}
}
</script>
<style lang = "scss">
#lineStationZone{
.question{ width:100%;height:200px;border:1px solid #c5c8ce;float:left; overflow-y: scroll;}
.el-checkbox-button__inner{
background: #DCDFE6;
border-radius: 18px;
margin:5px;
padding: 3px;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner{
background-color: #409EFF;
box-shadow: -1px 0 0 0 #8cc5ff;
color: #fff
}
.select_circuit{
width:100%;
height: auto;
/* float:left; */
display: flex;
flex-direction: row;
padding: 5px 0px;
}
.select_line{width:60px;height:26px;line-height:26px;text-align: center; float:left;margin-left: 6px;margin-right: 30px;margin-top: 6px; background: #409EFF;border-radius: 15px;color: #fff}
.select_station{width:90%;height:auto;float:left}
.select_station li{width:90px;height:46px;float:left;list-style: none;margin-left:10px;margin-top: 6px;}
.select_station li .stand{width:100%;height:26px;line-height: 26px;text-align: center ;float:left;background: #409EFF;border-radius: 5px;color: #fff}
.select_station li .district{width:100%;height:20px;line-height: 20px;text-align: center; float:left;border-radius: 5px;}
.district_0{color: red}
.district_1{color: #999}
.partition li{width:50px;height:20px;line-height: 20px;text-align: left;}
.ivu-poptip-popper {
/* width: 100% !important; */
/* left: 0px !important; */
}
.ivu-poptip-popper .ivu-poptip-inner {
border: 1px solid red !important;
}
.ivu-poptip-title {
text-align: left !important;
}
.poptip_line .el-checkbox-group{ width: 100% !important; word-break: break-all !important; margin-bottom: 10px;}
}
</style>
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:正在跳转