这几天在做期末作业,一个学生管理系统,前端部分使用了element-ui,在学生成绩展示时,不想做成简单的表格,恰巧在element组件中看到了展开行,即当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。于是便有了个大胆的想法!
先来看一下效果
根据官网的描述,为表格栏添加 type="expand"且为其子标签template添加 Scoped slot,可以开启展开行功能。并且展开的内容会渲染为template标签下的内容。
代码如下:
中间部分时重复的,所以不展示了
再为进度条写一下“颜色”
最后便完成了展示的样式,再完成期末作业的枯燥coding时,对表格进行大胆的创新使用,我觉得在某种意义上来说算是一种进步。
我还完成了分页,搜索等功能,如果你喜欢的话,请私信我。