问题遇到的现象和发生背景
此题为上一个问答后续https://ask.csdn.net/questions/7814632?spm=1001.2014.3001.5505
将餐厅数据换成人员数据后，搜索后选择人员，清空搜索后，选中的人员不一致
之前餐厅数据是ok的，但人员数据出了问题
用代码块功能插入代码，请勿粘贴截图
<template>
<div class="pSelect">
<div class="pHeader">
<div class="pText">选择人员</div>
<div class="pInput">
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="搜索人员"
clearable
@select="handleSelect">
</el-autocomplete>
</div>
</div>
<div class="pTable">
<el-table
ref="multipleTable"
:data="filPersons"
row-key="value"
tooltip-effect="dark"
style="width: 100%"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
:reserve-selection="true"
width="55">
</el-table-column>
<el-table-column
prop="id"
label="员工编号"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<div class="pFooter">
<div class="fLeft">
<el-popover
placement="top"
width="354"
trigger="click">
<el-table :data="multipleSelection" height="100%">
<el-table-column width="180" property="id" label="员工编号"></el-table-column>
<el-table-column width="180" property="name" label="姓名"></el-table-column>
<el-table-column
fixed="right"
label="操作"
width="54">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.row, scope.$index)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<i class="el-icon-arrow-up" slot="reference">已选择{{this.multipleSelection.length}}人</i>
</el-popover>
</div>
<el-button type="primary" class="fRight" @click="submitPerson">确定</el-button>
</div>
</div>
</template>
<script>
export default {
name:'personSelect',
components: {
},
data() {
return {
restaurants: [],//模拟向服务器发请求后的数据容器
state: '',//搜索框关键字
timeout: null,
multipleSelection: [],//选中名单
fromModel:'',
};
},
methods: {
loadAll() {
return [{"id":"01382","name":"马铖","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01385","name":"刘德江","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01387","name":"李存荣","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01390","name":"凌俊泓","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01393","name":"李宏锋","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01394","name":"蒋卫","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01395","name":"黄义龙","limit":"[0,0,0,0,0,0,0]","group":""},
{"id":"01396","name":"陈辉","limit":"[0,0,0,0,0,0,0]","group":""},
];
},
querySearchAsync(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
cb(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
},
handleSelectionChange(val) {
this.multipleSelection = val;
// let selected = val.length && val.indexOf(row) !== -1;
// console.log('row',row);
//判断选中状态
// if(selected){
//找出两个数组中不同的对象元素，添加到已选名单multipleSelection中
// for(var i = 0; i < val.length; i++){
// var obj = val[i];
// var id = obj.id;
// var isExist = false;
// for(var j = 0; j < this.multipleSelection.length; j++){
// var aj = this.multipleSelection[j];
// var n = aj.id;
// if(n === id){
// isExist = true;
// break;
// }
// }
// if(!isExist){
// this.multipleSelection.push(obj);
// }
// }
// this.multipleSelection.push(row);
// }else{
//选项为否，删除数组中的数据
// for(var i = 0; i < val.length; i++){
// var obj = val[i];
// var id = obj.id;
// var isExist = false;
// for(var j = 0; j < this.multipleSelection.length; j++){
// var aj = this.multipleSelection[j];
// var n = val.id;
// if(n === id){
// isExist = true;
// break;
// }
// }
// if(!isExist){
// this.multipleSelection.splice(obj,1);
// }
// }
// this.multipleSelection.splice(row,1);
// }
// console.log('tabledate',this.tableData);
// console.log('val',val);
// console.log('multiple',this.multipleSelection);
},
// handleSelectAll(val){
// this.multipleSelection = val;
// },
deleteRow(row,index) {
//console.log('row',row,'index',index);
this.$refs.multipleTable.toggleRowSelection(row, false);
console.log('删除',this.multipleSelection);
// this.multipleSelection.splice(index, 1);
},
},
mounted() {
this.restaurants = this.loadAll();
},
computed:{
filPersons(){
return this.restaurants.filter((p) => {
return p.name.indexOf(this.state) !== -1;
})
}
}
};
</script>
<style scoped>
.pSelect{
width: 100%;
height: 100%;
display: flex;
/* align-items: center; */
/* justify-content: center; */
flex-direction: column;
}
.pHeader{
height: 15%;
}
.pInput{
/* align-items: center; */
margin-left: 2%;
margin-bottom: 5%;
}
.pText{
margin: 5% 0;
text-align: center;
justify-content: center;
flex-direction: column;
font-size: 1.5rem;
}
.pTable{
flex:1;
overflow-y: auto;
}
.pFooter{
display: flex;
height: 5%;
align-items: center;
justify-content: space-between;
}
.fLeft{
margin-left: 3%;
color: rgb(10, 186, 250);
}
.fRight{
margin-right: 3%;
}
</style>
<style>
.pInput .el-input{
width: 180%;
}
.el-popover{
height: 75%;
overflow-y: auto;
}
</style>
