iview表格table中,如何添加Dropdown 下拉菜单

不多说,先看看效果把!


在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,才可以出发事件。

不知道  小伙伴看懂了原理吗?不明白就留言,我会及时回复你的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • overview 在React中,提供了受控和非受控两种方式来操作input的value,提供非受控方式的意义在于...
    老虎爱吃母鸡阅读 702评论 0 0
  • 我关着房门,坐在自己房间的书桌前。门外还不时传来老妈的咒骂声。 “庸俗!”我心中冒出这个词。没办法,尽...
    布道女巫阅读 354评论 2 6
  • 最近看到一则新闻: 合肥市80岁的老人吴本志和老伴半年来报警42次,每次报警的对象都是他们的儿子。 从2月份开始,...
    豆喵学堂阅读 329评论 0 0
  • 你什么都不懂时,全心全意指点你的人。
    听风llt阅读 151评论 0 0

友情链接更多精彩内容