iview render的使用

新手使用iview表格中的render也許會遇到的問題

iview的使用和element-ui類似。但在表格中控件的使用上二者有很大不一樣。element-ui在表格中是用插槽渲染模板，而iview是使用傳統的render渲染HTML頁面。

使用element-ui的好處是，它相對比較成熟，也就是所謂的坑少功能強。可是在表格中使用控件(Select, input, button, switch等)時，因爲是模板渲染因此冗餘代碼較多，特別遇到每列都有控件的，就不夠簡潔。

可是iview使用render雖然簡潔，但是按照官方的例子很容易一不當心進坑。

如下是官網文檔

{
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h  ('Icon', {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.name)
                        ]);
                    }
                },
                {
                    title: 'Action',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, 'View'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, 'Delete')
                        ]);
                    }
                }
複製代碼

很是易懂，其中render裏建立的標籤 Icon、Button 等都是iview的控件，第一次使用時的我照葫蘆畫瓢，使用 Select、Switch。雙雙碰壁。

從根源上抓問題就是 render 函數了，它其實就至關於 creatElement 建立一個標籤，而 Icon、Button 這些控件渲染以後標籤名恰好就是自己；可是 Select、Switch 渲染以後的 HTML 實際上是 span 或者 div 標籤，而後 class 名上綁定樣式和事件。

因此不推崇這樣綁定標籤，而是綁定控件，也就是 import 進來的控件。

正確用法爲：

{
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h  (Icon, {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.name)
                        ]);
                    }
                },
                {
                    title: 'Action',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(Button, {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, 'View'),
                            h(Button, {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, 'Delete')
                        ]);
                    }
                }
複製代碼

好像沒啥區別？對沒錯把引號去掉。引號裏面寫標籤名，什麼 div、span 那些，整個控件傳進來的時候不要引號。

關於 Select

既然說到iview的table了那就說說Select這個控件吧。作項目的時候幾乎全部人都踩到了同一個坑 --> 咦？！個人id傳回來了怎麼沒綁上去嘞！這個坑真的難找，咱們看看官方文檔中，Select是這麼寫的：

咱們再看看 iview 的 Select.vue 源碼：

這一切看起來那麼的美好~~

but !!!!! 我怎樣在綁定的時候賦上number類型的值捏？

通常的，咱們若是想v-model輸出number值，咱們會這麼作：

<input v-model.number="count" type="number">

so..... iview 中 Select 的文檔裏並木有 type 這個 props , 本身加確定是不行的。因此number類型的值沒法綁上去吖......， 默認類型都是string。這會形成接口給你個 10, 你的 option 裏對應的是 '10'，而後默認值變成了空。

這裏我實在沒想到解決辦法，我就.....我就默默地把接口傳回來的數值類型統統toString()了 ( T-T 委屈 ，但願有小夥伴能給出更好的方法，不要醬紫暴力 )

另外Select真的是奇怪耶！文檔上寫的是:

非 template/render 模式下，需使用 i-select、i-option

然而事實是：

管你什麼模式都須要用 i-select、i-option ！

另外，使用 iview 時存在諸多兼容問題，大多出如今 Select 上。好比 -->

咱們的代碼是經過 jekins 構建到正式環境上的，咱們本地 run 沒問題, build 以後 run 也沒問題，但是......咱們放到 jekins 上去構建，好了嘛 Select 的框都看不到還談值？？？！（T-T 委屈，後來沒辦法就把組件換成 element-ui 了， 有小夥伴知道這個問題可否告知感激涕零T-T）