iview 用jquery合并 table，数据双向绑定

columns4: [
{
type: “selection”,
width: 44,
align: “center”,
key: “selection”
},
{
title: “Language”,
key: “language”,
align: “center”,
width: 110
},
{
title: “Platform”,
key: “platform”,
align: “center”,
width: 110
},
{
title: “Period”,
key: “period”,
align: “center”,
render: (h, params) => {
let _this = this
return h(“div”, [
h(“DatePicker”, {
props: {
type: “date”,
placeholder: “Select date”,
value: this.data4[params.index].period.fromDate,
clearable: false
},
style: {
marginRight: “5px”,
width: “102px”
},
on: {
‘on-change’: function(event) {
// 这个需要这样先将row改变，再将row赋值给_this.data4
params.row.period.fromDate = event;
_this.data4[params.index] = params.row;
let index = _this.selectedData4.findIndex(d => d.index == params.index)
if(index != -1) {
_this.selectedData4[index] = _this.data4[params.index]
}
}
}
}),
h(“TimePicker”, {
props: {
type: “time”,
placeholder: “Select date”,
value: this.data4[params.index].period.fromTime,
format: “HH:mm”,
clearable: false
},
style: {
width: “70px”,
marginRight: “5px”
},
on: {
‘on-change’: (event) => {
params.row.period.fromTime = event;
_this.data4[params.index] = params.row;
let index = _this.selectedData4.findIndex(d => d.index == params.index)
if(index != -1) {
_this.selectedData4[index] = _this.data4[params.index]
}
},
}
}),
h(“span”, “~”),
h(“DatePicker”, {
props: {
type: “date”,
placeholder: “Select date”,
value: this.data4[params.index].period.toDate,
clearable: false
},
style: {
marginRight: “5px”,
marginLeft: “5px”,
width: “102px”
},
on: {
‘on-change’: (event) => {
params.row.period.toDate = event;
_this.data4[params.index] = params.row;
let index = _this.selectedData4.findIndex(d => d.index == params.index)
if(index != -1) {
_this.selectedData4[index] = _this.data4[params.index]
}
},
}
}),
h(“TimePicker”, {
props: {
type: “time”,
placeholder: “Select date”,
value: this.data4[params.index].period.toTime,
format: “HH:mm”,
clearable: false
},
style: {
width: “70px”
},
on: {
‘on-change’: (event) => {
params.row.period.toTime = event;
_this.data4[params.index] = params.row;
let index = _this.selectedData4.findIndex(d => d.index == params.index)
if(index != -1) {
_this.selectedData4[index] = _this.data4[params.index]
}
},
}
})
]);
}
}
],

// 这个需要这样先将row改变，再付给_this.data4,要不时间改变后，表格中选中的就会被清楚，好像重新渲染了

mergeTable(tds) {
let curr = $(tds[0]);
let idx = 0;
for (let i = idx; i < tds.length; i++) {
if (
curr.find(“span”).text() ==
$(tds[i])
.find(“span”)
.text()
) {
idx++;
if (idx != 1 && $(tds[i]).parent().find(‘td’).length >= 10) {
$(tds[i]).hide();
}
} else {
curr.attr(“rowspan”, idx);
idx = 1;
curr = $(tds[i]);
}
}
},
$(tds[i]).hide();要用hide(), 开始用的remove(),会有不良效果

mounted() {
let tds = $("#myList tbody tr").find(“td:first”);
this.mergeTable(tds);
tds = $("#allList tbody tr").find(“td:first”);
this.mergeTable(tds);
},
updated() {
let tds = $("#myList tbody tr").find(“td:first”);
this.mergeTable(tds);
tds = $("#allList tbody tr").find(“td:first”);
this.mergeTable(tds);
}
钩子函数去合并table

ok() {console.log(this.data4);if (this.selectedData4.length > 0) {let dataif ($(".ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused").text().trim() =="All") {data = this.data2.filter(d => d.contents == this.data4[0].contents);} else {data = this.data1.filter(d => d.contents == this.data4[0].contents);}this.selectedData4.forEach(d=> {data[d.index].period = d.period.fromDate + ' ' + d.period.fromTime + ' ~ ' + d.period.toDate + ' ' + d.period.toTime})}let _this = thissetTimeout(function(){let tds = $("#myList tbody tr").find("td:first");_this.mergeTable(tds);tds = $("#allList tbody tr").find("td:first");_this.mergeTable(tds);},1)this.selectedData4.length = 0
},

或者加上
setTimeout(function(){
let tds = $("#myList tbody tr").find(“td:first”);
_this.mergeTable(tds);
tds = $("#allList tbody tr").find(“td:first”);
_this.mergeTable(tds);
},1) 一定要是异步的