總結在使用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)因此先寫到這裏，從此若是再遇到什麼問題，再記錄到這裏。