admin 管理员组

文章数量: 1184232


2024年3月6日发(作者:二叉树遍历栈的变化)

iview table 两行显示 ,超出隐藏气泡显示

在iview的table组件中,如何实现两行显示,并在超出部分自动隐藏并显示气泡提示?

1. 设置表格行高度为两行的高度

在iview的table组件中,可以通过设置row-height属性来设置每行的高度,将其设置为两行的高度即可实现两行显示。例如:

```html

```

2. 使用ellipsis属性实现超出部分自动隐藏

在iview的table组件中,可以设置列的ellipsis属性来实现超出部分自动隐藏。例如:

```html

key='name' :ellipsis='true'>

```

- 1 -

上面代码中,姓名列的ellipsis属性被设置为true,表示如果内容超出列宽度,将自动隐藏并显示省略号。

3. 使用Tooltip组件实现气泡提示

为了让用户能够知道被隐藏的内容,我们可以使用iview的Tooltip组件来实现气泡提示。在姓名列的每个单元格中,添加Tooltip组件即可。例如:

```html

```

上面代码中,我们通过template标签来定义每个单元格的内容,并在其中添加Tooltip组件。Tooltip组件的content属性被设置为{{}},表示提示内容为姓名列的值。

- 2 -

通过上述步骤,我们就可以在iview的table组件中实现两行显示,并在超出部分自动隐藏并显示气泡提示了。

- 3 -


本文标签: 显示 超出 实现 组件 气泡