后台系统常用的table

后台系统,离不开crud,而crud中,常常会有表格的身影。
表格可以直接、清晰地列出数据

背景

每天总是不断地复制粘贴,修修改改,没完没了的el-table>el-table-column...,不如整理成可配置可服用的组件~

基本表格

只需要展示信息

image.png


开发的时候,关注在更多的业务上,而不是繁琐的写标签上




带搜索的表格

一般在最右边有操作按钮,编辑、删除、详情,点击弹窗、跳转、二次确认框

image.png

单元格可DIY

单元格里面的内容,需要处理,可能会显示几个信息

image.png

表格可编辑

image.png

表单嵌套表格,且表格可编辑

通过操作区域,触发单元格变为form组件

表格可编辑时,可能会涉及到:

  1. 规则校验
    校验时,一个是保存按钮的校验,一个是底部提交按钮的校验
    下图这种,
  2. 数据联动

image.png

table组件的代码




下面这种表格的形式,需要做两部分的校验:

  1. 点击表格的保存按钮
  2. 点击底部的提交按钮

elemnt-ui的表单校验对这种嵌套表单校验不是很友好,所以,不太建议这种形式,或者手动弹窗提示
image.png

开发

材料: vue、element-ui、form-create

你可能感兴趣的:(前端vue.js)