iView的Modal填坑之旅

现象和需求描述：

        有个表格，需要添加登记和查看功能，准备用一个modal（模态框）来实现。在设计过程中，希望能够实现最大的模块化和重用性。故一开始，设计了一个将iView的Modal和内部参数全部放入一个vue components组件中：

   子组件：

<template>
    <Modal
        :value="modalStatus"
        :title="dengji"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Content of dialog</p>
	</Modal>
</template>

父组件调用子组件：

<!--<div v-if="modalwww"> -->
			<!-- <span>123</span>  :Imodal="true" -->
			<!--<InfoModal :Imodal="modalwww" :Idengji="dengjiii"></InfoModal>-->
		<!--</div>-->

  结果发现效果并不好，问题在于父界面并不能很好的控制子界面的展开。(最大的问题在于父组件props在子界面绑定效果不好，点开后没有数据，然后去修改子组件的代码，保存，npm自动重新编译后，又能展示数据，比较明显的渲染顺序问题！个人认为将Modal也定义在子界面其实和下面的方法没有本质区别，只是个人没有去深入下去考虑如何实现和修复bug)

问题解决：        

        简单修改，将<Modal>置于父组件中，通过判断来展示和隐藏子界面。

<!--<InfoModal :Imodal="modalwww" :Idengji="dengjiii"></InfoModal>-->
			<Modal
		        v-model="modalwww"
		        title="新增违法建筑登记----基本信息"
		        :styles="mstyles"
		        @on-ok="ok"
		        @on-cancel="cancel">
		        <div v-if="modal_status">
		        	<InfoList :IItem="itemChakan" :key="itemChakan"></InfoList>
		        </div>
		 </Modal>
		<!--</div>-->

        InfoList是子界面的主体（涉及业务，暂不展示），通过父界面的button或者@click来控制modal_status的是与否

//登记函数
			dengji:function(){
				//登记传递一个空对象
				this.itemChakan = {
                    	******//{}中间是对象细节， object.item: ''  置为空即可
                    };
				this.modalwww = true;
				this.modal_status = true;
			},
			//查看函数
			chakan:function(chakanobject){
				//console.log("chakanobject:" + chakanobject.dsrxm);
				this.modal_status = true;
				this.itemChakan = chakanobject;
				this.modalwww = true;
			},

查看功能：

        查看的函数调用是在render中定义（在Table的column下）

{
                        title: '操作',
                        key: 'operation',
                        className: 'operation_css',
                        render: (h, params) => {
					    	return h('div', [
					        	h('div', {
					            	style: {
					                	display: 'inline-block',
					                	width: '50%',
					                	overflow: 'hidden',
					                	textOverflow: 'ellipsis',
					                	whiteSpace: 'nowrap',
					                	type: 'button',
					                	color: '#2d8cf0'
					            	},
					            	domProps: {
					                	title: '查看'
					            	},
					            	on:{
					            		click: ()=>{
					            			this.chakan(params.row);
					            		}
					            	}
					        	}, '查看'),
					        	h('a', {
					            	style: {
					                	display: 'inline-block',
					                	width: '50%',
					                	overflow: 'hidden',
					                	textOverflow: 'ellipsis',
					                	whiteSpace: 'nowrap'
					            	},
					            	domProps: {
					                	title: '删除',
					                	href: this.server + 'delete?编号=' + params.row.wfjzbh
					            	}
					        	}, '删除')
					    	]);	
					    }

on:{
					            		click: ()=>{
					            			this.chakan(params.row);
					            		}
					            	}

        chakan函数传递当前行的对象，通过mothods->chakan(chakanobject) 来修改data中的itemChakan，然后通过

   {  :item } 来向子组件传递，子组件接受并在InfoList中展示。

       查看功能细节问题：

                在关闭子模态框后，点开下一个查看时，仍然显示的是之前的数据，甚至点开登记，依然显示的第一个查看，思考过后认为存在的问题：

                模态框在打开后，就已经存在，点击关闭是调用的默认的方法，使其display:none;

              解决方法，就是在InfoList中增加:key回去检测对象是否已经修改，来重新生成节点对象。

<InfoList :IItem="itemChakan" :key="itemChakan"></InfoList>

思考：

        感觉功能实现的马马虎虎，部分细节没能结构化（套路化）

        在尝试的过程中，主要问题主要集中在dom节点的生成顺序和生存周期上，iView组件基于Vue.js ，不太熟悉渲染的过程，

容易导致部分组件生成空白，或者无法修改的问题，解决的思路大致为①双向动态绑定②重新生成