element-ui表格组件相关demo

前端 Vue、elemt-ui、表格组件相关demo

创建时间:2024-09-04 22:14

阅读:

1.所有表格demo代码地址
 2.基础功能
 3.显示子节点内容
 4.单元格高亮
 5.使用插槽

1.所有表格demo代码地址

https://github.com/wwsit/python_files/tree/master/004_element-ui/002_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6

2.基础功能

代码地址：
https://github.com/wwsit/python_files/blob/master/004_element-ui/002_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6/001_%E5%9F%BA%E7%A1%80%E5%8A%9F%E8%83%BD.vue

# 功能介绍：
1. height属性 设置表格的高度，当表格的内容超过表格的高度就会展示滚动条； :row-style=ListRowStyle 可以设置每一行的高度
2. show-overflow-tooltip当内容过长被隐藏时显示tooltip
3. :header-cell-style="HeaderCellStyle"  可以设置表头的样式
4. 通过type="index"可以设置行的序号自动生成、自动变化
5. 通过fixed属性可以固定某一列的内容
6. 添加sortable属性,可以让某一列具有手动排序的功能
7. 在表格的列中添加 :formatter="方法名" 属性，可以对某一列的值进行格式化输出，例如让某一列的值变红、变成超链接的效果...

3.显示子节点内容

代码地址：
https://github.com/wwsit/python_files/blob/master/004_element-ui/002_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6/002_%E6%98%BE%E7%A4%BA%E5%AD%90%E8%8A%82%E7%82%B9%E5%86%85%E5%AE%B9.vue

功能介绍：
1. 可以设置某个父节点是否有子节点内容

4.单元格高亮

代码地址：
https://github.com/wwsit/python_files/blob/master/004_element-ui/002_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6/003_%E5%8D%95%E5%85%83%E6%A0%BC%E9%AB%98%E4%BA%AE.vue    

功能介绍：
1. 默认第一个单元格会高亮，但点击其它单元格可以进行切换

5.使用插槽

代码地址：
https://github.com/wwsit/python_files/blob/master/004_element-ui/002_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6/004_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD.vue   

功能介绍：
1. 可以对表头或表格内容使用插槽，从而自定义效果

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。