iView中表格(Table)添加点击行展开扩展说明的功能

iView中表格(Table)添加点击行展开扩展说明的功能,第1张

先在data()的columns部分增加一列

然后在<Table>中,绑定每行点击事件@on-row-click

最后就是onExpand方法了

大概的思路就是通过元素追加,即table对象追加一个tr对象,tr对象追加3个td对象, td对象的值为你的input的输入值。

1

2

3

4

5

6

7

8

9

10

//初始化td对象及tr对象

var $td = $("<td/>"),$tr=$("<tr/>")

//分别为td对象赋值

$tr.append($td.clone().text( $("#a1").val() ))

.append($td.clone().text( $("#a2").val() +"-"+ $("#a2").val()))

.append($td.clone().text( $("#a4").val() ))

//table的id假设为tb,为table追加tr对象

$("#tb").append($tr)

不多说,先看看效果把!

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11814053.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存