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

最新推荐文章于 2024-09-13 17:11:16 发布

原创最新推荐文章于 2024-09-13 17:11:16 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

iview

3 篇文章

订阅专栏

本文介绍了如何在iView表格中利用jQuery进行单元格合并，并且详细阐述了在数据变更时如何保持双向绑定，确保表格数据的同步更新。通过设置rowspan属性和监听日期及时间选择器的变更事件，实现了表格动态合并和数据的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
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 data
    if ($(".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 = this
  setTimeout(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) 一定要是异步的