总结在使用iView过程中遇到的小问题

最近使用iView作为vue的开发UI框架，使用了一些组件。这里需要总结一下：

1. 首先，放出iView的地址：https://www.iviewui.com
2. 其次，iView的Github
3. 值得欣慰的是，segmentfault上也有iView的标签了，不过似乎不是很活跃呢[手动笑哭脸]。

一：如何为带有返回值的默认函数传参

在开发中遇到过一个问题，就是如果一个页面上使用了多次组件，每个组件有自己的事件，每个事件又有自己默认的返回值，那么就要在一个页面上连着写好多遍类似的方法？如下图：

这里使用的是Select 选择器。开发需求很简单，获取用户选择的值，然后同步到提前声明好的data中，如何获取值，这里的Select组件，已经帮我们搞定了，绑定一个方法，这个方法有默认值：@on-change返回值就是当前选中的值。
接上面的示例图这里有三个下拉选择，那么就有三个data，如下是相关实现的代码：

//值
device:{
    type: 'all',
    snmpVersion: 'all',
    snmpPort: 'all'
}
//获取并分别赋值
selectDevice(v) {       //切换设备类型
    this.device.type = v.value
},
selectSMNP(v) {         //切换smnp
    this.device.snmpVersionView = v.value
},
selectPort(v) {         //切换端口
    this.device.snmpPort = v.value
},

好了，似乎实现了呢，简单却不简洁。好在这里只有三个下拉选择，并且没有什么特殊的情况，那么如果这里有十多个呢？并且每个下拉选都要处理？我们继续复制十多遍，再改十多遍的字段名？NONONO...

通过观察发现这些功能完全一样，就是赋值不同，还要写这么多方法？那么我们是不是可以加个type？通过这个type来判断下？
思路有了，开始尝试！在看了iView的文档后，没有找到类似这样的具有默认值的方法如何传第二个参数...似乎进了死胡同？

但是，我们可以换种方式啊！
既然你的默认函数不能传参，那我是不是可以声明一个带有参数的函数啊！并且把你默认的函数当做参数传递啊！
好了，想到就做，尝试！   

<Select v-model="device.type" :label-in-value="true" @on-change="v=>{ setOption(v,'type')}">
    <Option v-for="item in deviceTypeList" :value="item.value" :key="item">{{ item.label }}</Option>
</Select>

我们在默认的函数内放一个匿名函数，这个函数执行一个我们定义好的`methods`传2个参数，一个是默认函数的参数，也就是获取点击选择的那个值，另一个函数就是我们需要用来判断的参数。

//setOption
setOption(value,type){
    console.log(value);
    console.log(type);
}

成功！这样我就写一个方法，然后通过判断就可以了，这样不管你以后来多少下拉选我也微微一笑，绝对不抽。
最近换了工作，更忙了，因此没时间来更新，看到评论区有的小伙伴在这个方法下遇到了问题，我自己特意试了一下，发现在collapse组件下也是可以用的，现在贴一下我自己的测试代码:
//这里是从官网复制的例子，请注意`@on-change=""`中的事件，写法和select是一样的
<Collapse v-model="value1" accordion @on-change="v=>{onCollapse(v,'test')}">
    <Panel name="1">
        史蒂夫·乔布斯
        <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
    </Panel>
    <Panel name="2">
        斯蒂夫·盖瑞·沃兹尼亚克
        <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
    </Panel>
    <Panel name="3">
        乔纳森·伊夫
        <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
    </Panel>
</Collapse>
//这里是collapse默认的方法中传入的函数
methods:{
    onCollapse(data,type){
        console.log(data);
        console.log(type);
    }
}
![图片描述][6]

二：Tabel组件中的字段渲染

时隔几天，勤劳的楼主又来了，这次记录下最近遇到的Tabel组件中某些字段渲染的坑吧。
iView的Tabel组件中经过了一次改版，改版的内容主要是体现在渲染render这个方法，下面复制一段关于新版该方法的描述：

render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

下面是楼主在开发中使用的一个小栗子：

如图：数据下载字段里的内容就是需要渲染的特殊样式，包含了className，style，href以及点击事件。当然了实际中是不会出现这么多内容的，这个栗子只是把这些需求堆在一起方便说明。

//以下是代码部分
{
    title: '数据下载',
    key: 'download',
    align: 'center',
    width:100,
    render:(fc,obj)=>{
    //新版本中render的参数改了，不再是之前的三个参数，变成了2个，其中fc是一个需要返回的渲染对象，obj就是旧版本的row字段，index字段也在其中。
    //其中第二个字段可以传入一个array达到在一个字段中渲染多个标签的需求。
        return fc('a',{
        //fs这个函数在本例中接收了三个参数 'a'是渲染内容外面包裹的标签名、比如'div','span'
        //第二个参数是一个对象，内容比较繁杂，主要的渲染需求就出自这里。
            attrs:{
            //这里的attrs字段是为标签附加属性，比如这里的href链接指向。接受一切标签可用属性如 data-这类
                'href': obj.row.dataDownload
            },
            //class是渲染的标签类名，支持array添加多个类
            class:'test',
            //style是内联样式，注意样式需要换成驼峰形式
            style:{
                marginLeft:'10px'
            },
            //on是为渲染元素绑定事件
            on:{
                click:()=>{
                    //需要注意这里的this指向，楼主被这里坑的不浅，在下面详细解释
                    this.con(obj.row.id)
                }
            }
            //最后的字符串就是渲染的元素文字
        },'立即下载')
    }
}

好了这就是经过渲染后页面呈现的标签，我们上面添加的内容正确体现了出来。

吐槽一下：这个改版非常的...不爽！你问我为什么？一个简单的渲染为什么如此复杂呢...如果是之前版本的Tabel组件还是这些要求的话，那么就是一行代码可以搞定的:
`<a @click="detail(${obj.row.roleId})" :href="${obj.row.download}" class="text" style="margin-left:10px">查看</a>`

下面是关于使用中的**不足**和**总结**：
楼主在开始使用中把所有`Tabel`的`columns`是放在了一个外部文件，通过`import`方式引入的。因此在`render`函数中的this指向了该文件的export对象，所以一些事件的方法会在控制台报错！楼主尝试了许多方式，都不能把这个`this`指向到Vue的实例中，无奈只好把这些头部的字段挪进了`data`中，如果有哪位大佬有好的解决方案请留言告知！感谢。

先写到这里，最近忙的够呛(LanDeYiB)所以先写到这里，今后如果再遇到什么问题，再记录到这里。