总结在使用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)因此先写到这里，从此若是再遇到什么问题，再记录到这里。