html表格联动,iView table组件两列联动

一、效果图

版本选择变化，版本提交时间跟随变化。

table控制另一列的数据显示.gif

二、关键代码

/**

* 训练页面-训练配置

*/

setTrainTable() {

this.train_tableColumns = [

{

type: 'selection',

width: 60,

align: 'center'

},

{

type: 'index',

title: '序号',

width: 80,

align: 'center'

},

{

title: '已采楼层',

key: 'name',

align: 'center'

},

{

title: '版本选择',

key: 'version',

align: 'center',

render: (h, params) => {

let currentData = this.train_tableData[params.index];

let versionList = currentData.versionVOList;

//默认第一个选项

if(!currentData.version){

currentData.version = versionList[0].version;

currentData.time = versionList[0].versionCommitDate;

}

let optionArr = [];

versionList.forEach((item,i) => {

optionArr.push( h('Option', {

props: {

value:item.version,

key: item.version

}

}, ""+item.version+""))

});

return h('Select', {

props: {

value: currentData.version,

},

on: {

'on-change':(value) => {

currentData.version = value;

currentData.time = versionList.find(p => p.version === value).versionCommitDate;

this.$set(this.train_tableData,params.index,currentData);

}

}

}, optionArr)

}

},

{

title: '版本提交时间',

key: 'time',

align: 'center',

render: (h, params) => {

let currentData = this.train_tableData[params.index];

let time = currentData.time;

return h('div', {}, ''+time+'');

}

}

]

},