通过if判断el-table-column的类型,但是有时候碰见复杂的需求,这种方式是不现实的,因为我们不可能去判断所有的类型. 这个时候用render/jsx去插入slot的方式渲染就再合适不过了.
比如这种需求, 渲染一个label + 一个icon + 一个d出框, d出框内容是根据当前行的数据渲染出来对的.
我们在初始化columns的时候声明类型,以及render函数, 返回VNode节点.
不多说,先看看效果把!在iview中Table表格中有一个列描述数据对象(render),render是 columns 中的一项,自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引。
当然官网提供一个简单的使用方法: iView - A high quality UI Toolkit based on Vue.js
现在我们来实现,添加一个Dropdown 下拉菜单:
这里要注意下我描述的,1,2,3,4点,先不急,咱们先看下官网这个Dropdown组件
不难看出,讲一个组件写成render其实很简单,只需要写成这样
最后就是要注意下,绑定事件了,这里的on要写成nativeOn,才可以出发事件。
不知道 小伙伴看懂了原理吗?不明白就留言,我会及时回复你的。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)