el-table-column图标表
时间: 2024-05-31 09:05:04 浏览: 15
el-table-column 是一个基于 Element UI 的表格组件,它提供了很多实用的功能,其中包括可以在表头中使用图标来增强表格的可读性。在 el-table-column 中,你可以通过 `type` 属性来指定表头单元格中要显示的图标类型,支持的图标类型包括 `selection`(多选框)、`index`(序号)、`expand`(展开行)以及自定义的图标名称。
另外,在表格中的每一行数据中,你也可以通过自定义的插槽来实现对应的图标展示。例如,你可以在 el-table-column 中使用 `slot-scope` 属性来定义一个自定义的插槽,然后在该插槽中根据当前行数据的状态来渲染对应的图标。
相关问题
el-table-column 添加图标
要在 `el-table-column` 中添加图标,可以使用 `scoped slot` 和 `el-icon`。
首先,在 `el-table-column` 中添加 `scoped slot`,例如:
```html
<el-table-column label="操作">
<template slot-scope="scope">
<i class="el-icon-edit"></i>
</template>
</el-table-column>
```
这样就添加了一个 `scoped slot`,在每个单元格中都会渲染一个编辑图标。你可以根据需要修改图标的类名。
如果你想在图标上添加点击事件,可以给 `i` 标签添加 `@click` 事件,例如:
```html
<el-table-column label="操作">
<template slot-scope="scope">
<i class="el-icon-edit" @click="handleEdit(scope.row)"></i>
</template>
</el-table-column>
```
这样就给图标添加了一个点击事件,点击时会调用 `handleEdit` 方法,并传入当前行的数据作为参数。你需要定义 `handleEdit` 方法来处理点击事件。
<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column> <el-table-column prop="ymatter" label="具体事项(原)" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column> <el-table-column label="具体事项(新)" prop="xmatter"> <el-table-column prop="point" label="考核要点"></el-table-column> <el-table-column prop="method" label="计分方法"></el-table-column> <el-table-column prop="target" label="考核目标" width="200"></el-table-column> </el-table-column> <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50"></el-table-column> </el-table> </el-container> </template>给这个表格美化的显眼点
你可以尝试在表头中添加图标或者字体图标,让它更加显眼。例如,可以在考核指标列的表头单元格中添加一个 `el-icon-warning-outline` 的图标,表示这一列是比较重要的内容;在考核周期列的表头单元格中添加一个 `el-icon-date` 的图标,表示这一列是和日期相关的内容。同时,你也可以尝试添加一些过渡效果,比如当鼠标悬停在单元格上时,让单元格的背景色变化,增加一些交互效果。下面是一个例子:
```
<template>
<el-container style="height: 100%">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110">
<template slot="header">
<i class="el-icon-warning-outline"></i>
考核指标
</template>
</el-table-column>
<el-table-column prop="ymatter" label="具体事项(原)" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column>
<el-table-column label="具体事项(新)" prop="xmatter">
<el-table-column prop="point" label="考核要点"></el-table-column>
<el-table-column prop="method" label="计分方法"></el-table-column>
<el-table-column prop="target" label="考核目标" width="200"></el-table-column>
</el-table-column>
<el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50">
<template slot="header">
<i class="el-icon-date"></i>
考核周期
</template>
</el-table-column>
</el-table>
</el-container>
</template>
<style>
.el-table__row:hover {
background-color: #f5f5f5;
}
</style>
```
这个例子中,我们在考核指标列和考核周期列的表头中分别添加了一个图标和文字,让它们更加显眼。同时,在 CSS 中定义了当鼠标悬停在单元格上时,单元格的背景色变成浅灰色,增加了一些过渡效果。你可以根据需要修改图标和颜色等样式,或添加其他交互效果。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)