阅读源代码|向iview的大佬们学习编程思想???【总结】话题|let和var(1,2)的区别图|let和var(1,2)的区别带VAR和不带VAR的区别图|有VAR和无VARLET和VAR（三四）图的区别总结|范围和范围链练习|范围和范围链图|理解闭包案例|闭合功能：保护保存图|变量提升、私有变量、全局变量、参数的理解|heap内存栈内存释放，null和{}的区别，undefined【iview】低版本iview实现表格拖动，滚动条列宽计算问题案例|iview中的表格：拖动拖放适配列、自定义固定列、合并列阅读源码|跟着大佬学习编程思想|iview的Table组件合并列demo|iview的Table组件合并列，升级代码0/上个月阅读iview源码，使用iview的Table组件做合并行的效果，仔细阅读了那篇源码，收获颇丰。△14.1iview的Table组件的行/列合并https://github.com/view-design...△14.2在table.vue的props对象中定义属性这里用到了：https://github.com/view-design...getChildNode(h,data,nodes){//...CODEif(data.children&&data.children.length){data.children.forEach((row,index)=>{让$tds=[];this.columns.forEach((column,colIndex)=>{//=>循环每一列时，判断当前行/列是否需要显示“合并行”的属性//=>this.showWithSpan()方法返回一个布尔值//=>是：进入判断体if(this.showWithSpan(row,column,index,colIndex)){//...CODEconst$td=h('td',{class:this.alignCls(column,row),//=>设置td的attrs属性，在vue中用atrrs写入DOM属性//=>this.getSpan()方法返回值rowspan和colspan属性：this.getSpan(row,column,index,colIndex)},[$tableCell]);//...代码}}）;});}//...CODE}△table-body.vuesetrowspan/colspan/***获取跨度值*@param{object}row*@param{object}column*@param{number}rowIndex*@param{number}columnIndex**@return{object}returnanobject*/getSpan(row,column,rowIndex,columnIndex){//=>把parent的spanMethod函数赋值给fn的堆内存的16进制地址//=>fn是传入的函数constfn=this.$parent.spanMethod;//=>确定fn是否是一个函数//=>是一个函数：一些操作//=>不是一个函数：返回一个{}对象if(typeoffn==='function'){//=>fn是一个函数，然后调用该函数，传递实参集，将函数的返回结果赋值给resultconstresult=fn({row,column,rowIndex,columnIndex});//=>初始值rowspan/colspan默认为1letrowspan=1;让colspan=1;//=>上一个截图：spanMethod可以返回一个数组/对象//=>判断得到的结果是否为数组//=>分别获取用户设置的rowspan/colspan值if(Array.isArray(result)){行跨度=结果[0]；colspan=结果[1];}elseif(typeofresult==='object'){rowspan=result.rowspan;colspan=result.colspan;}//=>返回结果return{rowspan,colspan};}else{返回{};}},/***显示行/列合并*@param{object}row当前行*@param{object}column当前列*@param{number}rowIndex当前行索引*@param{number}columnIndex当前列索引**@return{boolean}返回一个布尔值:yes,truenofalse*/showWithSpan(row,column,rowIndex,columnIndex){//=>调用this.getSpan()方法，将返回结果赋值给常量resultconstresult=this.getSpan(行，列，rowIndex，columnIndex);//=>如果结果中的任何rowspan/colspan为0，则取反->true//=>最后的结果是返回一个布尔值return!(('rowspan'inresult&&result.rowspan===0)||('colspan'inresult&&result.colspan===0));};△table-body.vueprocessesrowspan/colspan!(('rowspan'inresult&&result.rowspan===0)||('colspan'inresult&&result.colspan===0))(1)运算符优先级(数字越大优先级越高):()括号20！logicnot16in11===equalsign10&&logicAnd6||logicor5(2)A||BA为真，则返回A；A不为真，则返回BA&&BA为真，则返回B；A不为真，则返回A(3)propinobjin判断对象中是否有属性prop(4)==等号：只需要判断值是否相等，如果两者上的数据类型两边不一致，先转换数据类型，再判断===全等号：严格判断，既判断数据类型又判断值，都等于TRUE(5)到FALSE5种情况：''空字符串,null,undefined,0,NaN1新增——在保持原有代码的基础上升级：使用spanMethod方法传参（2）行/列合并控制表的td属性rowspan和colspan，哪些行哪些列需要需要指定：可以使用数组/对象(3)接收到指定行/列时，需要判断是否为函数，只有是函数才能调用；函数的返回结果数组/对象得到对应的值。开发中遇到的问题：简单一句话：保证原来的部分代码没有问题，同时可以升级保证2+树的显示。啰嗦的解释可以略过：Dynamicincreaseanddecreaseofformitemsbasedoniview'sFormcomponent(https://www.iviewui.com/compo...)在实际应用中，一个表单表单的组件CustomSearch动态生成搜索条件，包括表单项：Input输入框、DatePicker日期选择器、Select选择器、Checkbox多选框、Cascader级联选择、Tree树。其中Tree树组件是基于jQuery的zTree树插件封装的。Tree组件需要的数据在各个业务场景中由自身传入的数据渲染，并传入各种参数，如：:treeData=""渲染一个树数组。在之前的需求中，搜索条件树只需要一棵树就够了。当初设计CustomSearch组件和Tree组件的渲染时，非常繁琐，只能按照一棵树来渲染。最新的需求中需要两棵树的搜索条件，动态请求返回的数据可以渲染DOM。但是对于如何传递参数来渲染不同的树，以及如何获取选择的搜索条件，需要在原有的基础上进行扩展，兼容原有的代码。△14.3需求：在搜索条件2中显示2+棵树/实践1支持1棵树搜索条件的原始数据封装在CustomSearch组件中，但是需要单独请求Tree数据，然后放入渲染.△14.4原来的组件只支持显示一棵树2，现在的需求是显示2棵树，现在需要改成支持2+棵树。同时这种方式也支持1棵树的渲染，兼容之前的写法。这个在其他地方用的比较多，不能影响其他人的使用。△14.5业务CustomSearch高级搜索组件中MOCK模拟的接口地址：[https://www.fastmock.site/moc...]所属组织树形式的动态数据接口大学[https://www.fastmock。site/moc...]subjectbooktree[https://www.fastmock.site/moc...]/***设置树的初始化数据*@param[Object]treeJSON显示表单项tree*@param[Array]treeKeys表示树的表单项的key，*@returns{Object}返回处理后的数据*/treeMethod(treeJSON,treeKeys){//为每棵树添加初始化信息treeKeys.forEach((item,index)=>{//treeParamsCustom是一个对象，所以可以得到它的堆内存地址lettreeParams=treeJSON[item].formItemClass['treeParamsCustom'];//初始化：treeData数据为空，默认this.$set(treeParams,'treeData',[]);this.$set(treeParams,'isShowTree',false);//请求接口this.getTreeData([url],treeParams);});returntreeJSON;},/***获取树数据*@paramurl请求接口*@paramtreeParams需要设置的属性*/getTreeData(url,treeParams){treeParams.isShowTree=false;_this.$http.get(url).then((response)=>{让{data:{data:{treeData=[]}}}=响应；if(response.processStatus){treeParams.treeData=treeData;treeParams.isShowTree=true;}},()=>{treeParams.isShowTree=false;console.log('错误');});},△Application:treeMethod方法，放在vue文件的methods对象中//获取isChecked属性为true的数据getShowData(rows){let_this=this;_this.items=[];for(leti=0;i
