新手使用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 的 Select.vue 源码：既然说到iview的table了那就说说Select这个控件吧。做项目的时候几乎所有人都踩到了同一个坑 --> 咦？！我的id传回来了怎么没绑上去嘞！这个坑真的难找，我们看看官方文档中，Select是这么写的：
这一切看起来那么的美好~~
but !!!!! 我怎样在绑定的时候赋上number类型的值捏？
一般的，我们如果想v-model输出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）