美文网首页
iView table组件两列联动

iView table组件两列联动

作者: 吖蛋黄 | 来源:发表于2018-09-28 14:59 被阅读0次

一、效果图

版本选择变化,版本提交时间跟随变化。 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+'');
                        }
                    }
                ]
            },

相关文章

网友评论

      本文标题:iView table组件两列联动

      本文链接:https://www.haomeiwen.com/subject/yftbgftx.html