el-empty使用字体图标
时间: 2023-07-30 08:07:01 浏览: 49
el-empty 可以使用字体图标来显示空状态的图标,具体步骤如下:
1. 首先需要引入字体图标的 CSS 文件,可以使用阿里巴巴矢量图标库提供的链接:
```html
<link rel="stylesheet" href="//at.alicdn.com/t/font_1234567_abcd123.css">
```
其中,`font_1234567_abcd123` 是你在矢量图标库中创建的项目的 font-class 前缀,具体可以在矢量图标库中查看。
2. 在 el-empty 中使用 `i` 标签和对应的 font-class 名称来显示图标,例如:
```html
<el-empty description="暂无数据">
<i class="iconfont icon-data"></i>
</el-empty>
```
其中,`icon-data` 是在矢量图标库中定义的图标名称。
通过这种方式,可以方便地使用字体图标来呈现 el-empty 的空状态图标。
相关问题
el-table 放字体图标
根据提供的引用内容,没有提到如何在el-table中放置字体图标。但是,可以通过在el-table-column中使用slot-scope来自定义列的内容,从而实现在el-table中放置字体图标。具体实现方法可以参考以下代码示例:
<el-table>
<el-table-column label="xxx">
<template slot-scope="scope">
<i class="iconfont icon-xxx"></i>{{ scope.row.xxx }}
</template>
</el-table-column>
</el-table>
其中,iconfont是字体图标库的名称,icon-xxx是具体的图标名称,scope.row.xxx是el-table中对应行的数据。通过这种方式,可以在el-table中放置字体图标。
el-empty中怎么使用a标签
在el-empty中使用a标签可以让用户点击空状态页面上的链接跳转到其他页面。下面是一个简单的示例:
```html
<el-empty description="暂无数据">
<a href="#">返回</a>
</el-empty>
```
在这个示例中,我们在el-empty组件内部添加了一个a标签,并设置了href属性为"#",表示点击链接不跳转到其他页面。你可以根据实际需求修改href属性的值,让链接指向其他页面。