这次的需求数据是返回在详情里面,但是数据源是另外请求一个接口获取列表
如果数据只是返回在列表接口回显直接
this.$refs.table.toggleRowSelection(数据);
就可以了.
数据来源自不同地方还要回显多数据勾选的时候情况就不一样了
首先我对比了一下列表和详情的数据结构,发现结构不一样,
把两个数据直接写死.
// 获取数据时世界把数据写死
let arr = [
{serviceAptitudeId:7,serviceAptitudeName:'核酸检测资质'},
{serviceAptitudeId:9,serviceAptitudeName:'二级服务资质'}
]
this.tableData = arr
//详情接口拿到的数据也写死 这边暂且为form的list
this.form.list = [
{serviceAptitudeId:7,serviceAptitudeName:'核酸检测资质'},
{serviceAptitudeId:9,serviceAptitudeName:'二级服务资质'}
]
this.toggleSelectionTwo(this.form.list) //调取回显的接口
// 获取到详情的数据直接传过来进行toggleRowSelection回显
toggleSelection(rows) {
console.log(rows)
if (rows) {
rows.forEach(row => {
this.$refs.table.toggleRowSelection(row);
});
} else {
this.$refs.table.clearSelection();
}
},
打印的时候发现rows有数据,并且跟列表数据一模一样,列表没有勾选,但是勾选列表的时候,
@selection-change打印的数据有传进去勾选的2个数据和我再勾选的数据,数据重复了.
测试加了row-key也无法显示出来,后来解决办法
getArr(){
let m = this
let arr = []
if(m.form.sysEngineerServices && m.form.sysEngineerServices.length>0){
//循环列表数据
for(let i =0;i<m.tableData.length;i++){
//再循环详情获取到的数据
for(let k = 0;k<m.form.list.length;k++){
if(m.tableData[i].serviceAptitudeId == m.form.list[k].serviceAptitudeId){
//把和详情数据一样的数据push进去,前提是我获取到数据格式已经处理成一样的格式了
arr.push(m.tableData[i])
}
if(i == m.tableData.length-1){
// 把tableData的数据再return回去用toggleSelection方法处理
return arr
}
}
}
}
},
就回显成功了…
数据明明是一模一样的…一定要用列表原数据进行push…再this.$refs.table.toggleRowSelection(row)进行处理.
记录一下这个坑