基于Vue.js的iView组件库table组件内render RadioGroup实现展开扩展栏效果

问题:

        在开发过程中,碰到在表格内对每行选项判断是否合格(符合),如果,不符合,在弹开的扩展栏里填写不符合的详细信息的需求。

代码:

        

{
                        title: '核查情况',
                        key: 'checkStatus',
                        //type: 'expand',
                        className: 'checkStatus_css',
                        ellipsis:true,
                        width: 160,
                        render: (h, params) => {
					    	return h('RadioGroup',{
					    			props:{
					    				vModel: 'checkStatus'
					    			},
					    			on:{
						            		'on-change':(status)=>{
						            			//备注:  不要用params。row来修改数据
						            			//table根据data来变更。当前行数据的修改不会反馈到后台script里的数据
						            			//使用$set能够动态监测
						            			if(status === 'false'){
						            				//params.row._expanded = true
						            				this.$set(this.pagerData.data[params.row._index], '_expanded', true)
						            			}else{
						            				//params.row._expanded = false
						            				this.$set(this.pagerData.data[params.row._index], '_expanded', false)
						            			}
						            		}
						            	}
					    		},[
						    		h('Radio',{
						    			props:{
						    				label: 'true'
						    			}
						    		},'符合'),
						    		h('Radio',{
						    			props:{
						    				label: 'false'
						    			}
						    		},'不符合')
						    	]
						    );
					    }
                   	},
                    {
                        ellipsis:true,
                        type: 'expand',
                        width: 0,
                        render: (h, params) => {
					    	return h(ExpandComponent, {
                            	style:{
                            		//padding: 0
                            	},
                                props: {
                                    row: params.row
                                }
						    });
					    }
                    }

结果:

基于Vue.js的iView组件库table组件内render RadioGroup实现展开扩展栏效果_第1张图片

你可能感兴趣的:(前端)