在element表格中嵌套成绩表

这几天在做期末作业,一个学生管理系统,前端部分使用了element-ui,在学生成绩展示时,不想做成简单的表格,恰巧在element组件中看到了展开行,即当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。于是便有了个大胆的想法!


先来看一下效果

最终效果

根据官网的描述,为表格栏添加 type="expand"且为其子标签template添加 Scoped slot,可以开启展开行功能。并且展开的内容会渲染为template标签下的内容。

代码如下:

中间部分时重复的,所以不展示了

再为进度条写一下“颜色”

最后便完成了展示的样式,再完成期末作业的枯燥coding时,对表格进行大胆的创新使用,我觉得在某种意义上来说算是一种进步。

我还完成了分页,搜索等功能,如果你喜欢的话,请私信我。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 准备工作 一、安装脚手架 1、安装vue脚手架,这是构建vue项目的工具-g为全局安装​ npm insta...
    不困于情阅读 2,309评论 0 3
  • element-ui 文档 Vue项目接口文档地址 博客 session 和 cookie等 学什么? 1 如何使...
    cj_jax阅读 3,980评论 0 10
  • 完整项目地址:vue-element-admin系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二...
    7cd975786ccd阅读 6,958评论 2 35
  • Element对象对应网页的HTML标签元素。每一个HTML标签元素,在DOM树上都会转化成一个Element节点...
    许先生__阅读 1,874评论 0 2
  • 01 前不久受邀,替朋友在外地做过一场校招。 回到校园,看见那些同学,想起自己毕业那会儿也甚是好笑。四处撒网,到处...
    雷垒阅读 1,358评论 19 39