解放劳动力,拒绝crud【基于element-ui的表格模版】

缘起

在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。

常规操作流程:

  • 表格组件
  • 分页组件
  • 弹出层组件+表单组件一套
  • 搜索栏表单组件一套

一把梭下来写了很多样版式代码,风格可能还不统一。

为了解放劳动力,特此,基于element-ui封装了一个table-template组件,现在只需加上少量配置项,就可以完成一套表格+表单+分页+搜索的页面。

参数说明:

  • data 显示的数据
  • config 配置项
  • @submit-add 新增提交时触发
  • @submit-edit 编辑提交时触发
  • @submit-search 点击搜索时触发
  • @page-change 点击分页时触发
  • page 分页参数

更多配置项说明请在项目中查看,仓库地址:戳这里

在线运行

<template>  
  <section> 
     <table-template
        :data="userList"
        :config="config"
        :table-loading="tableLoading"
        @submit-add="submitAdd"
        @submit-edit="submitUpdate"
        @submit-search="handleSearch"
        @page-change="fetchList"
        :page='page'>
  </table-template>
  </section>
</template>
<script>
export default {
    data() {
      return {
        tableLoading: false,
        userList: [
          {
            id: "123",
            username: "xxx",
            phone: "13555555555",
            state: 1
          }
        ],
        config: {
          dialogProps: {width: '500px'},
          handlerProps: {width: '130px'},
          columns: [
            {
              label: 'ID',
              field: 'id',
              hideInDialog: true,
              hideInSearch: true,
            },
            {
              label: '登录账号',
              field: 'username',
            },
            {
              label: '手机',
              field: 'phone',
              hideInSearch: true,
            },
            {
              label: '状态',
              field: 'state',
              type: 'tag',
              value: 1,
              options: [{value: 1, text: "正常"}, {value: 0, text: "禁用"}],
              stateMapping:{
                0:"danger",
                1:"success"
              },
              // render: (row) => {
              //   return row.state ? <el-tag type="success">正常</el-tag> : <el-tag type="danger">禁用</el-tag>
              // },
              formEl: {
                type: "radio",
              },
              searchEl: {
                type: "select",
                props: {
                  clearable: true
                }
              }
            },
          ],
          handlerList: [
            {
              label: '编辑',
              icon: 'el-icon-edit'
            },
            {
              label: '删除',
              icon: 'el-icon-delete',
              click: row => {
                console.log("delete");
              }
            }
          ],
          rules: {
            username: [
              {required: true, message: '请输入登录账号', trigger: 'blur'}
            ],
          },
        },
        page: {
          current: 1,
          size: 10,
          total: 10
        }
      };
    },
    methods:{
      handleSearch(params) {
        console.log("search",params);
      },
      submitAdd(row, hideLoading, done) {
        console.log("add");
      },
      submitUpdate(row, hideLoading, done) {
        console.log("update");
      },
      fetchList(){
        console.log("pageChange");
      }
  }
}
</script>

上面代码即可生成如下页面:
image.png
在线运行

完结

Image placeholder
梁冰洋
未设置
  55人点赞

没有讨论,发表一下自己的看法吧

推荐文章
笔记:element固定表头的表格,如果表格太宽了拉到最右侧会出现表头和内容不对齐的情况

在顶级样式文件里面加下面的代码.el-table--borderth.gutter:last-of-type{ display:block!important; width:8px!important

波士顿动力版“狗多力量大”!10只机器狗拉动大卡车,SpotMini量产在即

大数据文摘出品作者:蒋宝尚、魏子敏拉动一辆卡车需要多少条狗?波士顿动力最新给出的答案是——10只。今天凌晨,机器人公司波士顿动力最新发布了一段视频,视频中,网红机器狗SpotMini刚刚学会了新技能:

「解放双手」老舅教你VS Code Disco

观感度:🌟🌟🌟🌟🌟口味:驴肉蒸饺烹饪时间:15min这是最好的时代,也是最坏的时代。今年听到过最浪漫的一句话:我们在键盘上留下的余温,也将随时代传递到更远的将来。感觉让理性的技术人多了份柔光滤镜。也许

稳定彰显强悍实力,商务办公首选ThinkPad L490

商务本主要面向的人群是职场精英,他们对于产品的稳定性以及数据的安全性都有极高的要求,与此同时为了满足繁杂的办公任务,也需要强劲的性能来保驾护航。全新产品ThinkPadL490采用了英特尔第八代低功耗

对话OceanBase资深总监韩鸿源:数据库是技术能力,云是使用方式,两者不应是竞争关系

5月10日,在第十届中国数据库技术大会(DTCC2019)上,蚂蚁金服的金融级分布式关系数据库OceanBase2.0,在经过200名数据库领域三年以上的从业者投票和专业评委的评选下,高分荣获了“年度

“听完你的评价,我们决定拒绝这位明天入职的技术经理”

每个工作日的中午,只要天气晴朗,我都会在午餐后去附近的公园溜达溜达,一来可以帮助肠胃消化,二来则有助于我静心思考工作总结,从而增强写作主题构思的能力。所以,我比较厌烦在这个时间段里聊工作。上周的某天,

Slenium 2 Webdriver Highlight Element

课程推荐:学习猿地推出更多免费体验课等您来哦~请点击进入 ViewCode? defhighlight_element(self,locator):"""docstringforhighlight

基于Redis实现Spring Cloud Gateway的动态管理

引言:SpringCloudGateway是当前使用非常广泛的一种API网关。它本身能力并不能完全满足企业对网关的期望,人们希望它可以提供更多的服务治理能力。但SpringCloudGateway并不

如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

css表格间距怎么调?

css表格间距怎么调?在CSS中可以通过相关属性对表格进行控制。1.居中对齐对表格设置width,然后设置margin:0auto;(相关课程推荐:css视频教程)2.单元格间距对表格设置border

dw中如何设置表格css样式

1、新建一个空白文档,点击插入table,插入一个适合的表格。2、在表格内输入任意文字,右键css样式,新建,选择标签类型。(推荐学习:CSS视频教程)3、选择table,点击确定,根据需求定义tab

列表与表格笔记

####ul:无序列表disc默认值实心圆circle空心圆square方块none无 ####ol:有序列表数字1.......字母a........

列表与表格笔记

caption表格标题width宽度height高度align摆放位置centerbackground背景图片bgcolor背景颜色border1边框bordercolor边框颜色cellspacin

表格行和列常用属性

tr:height行高align行内容水平对齐方式valign行内容垂直对齐topmiddlebottombgcolor行的背景颜色colspan单元格跨列rowspan单元格跨行

列表与表格笔记

Iframe width宽度height高度name名称topIframeleftIframerightIframesrc网页路径scrolling滚动条yesnoautoframeborder边框1

Udemy:人工智能是2020年职场最需要的技能之一

TensorFlow是过去三年中最受欢迎的技术技能,根据Udemy的数据在2016年至2019年之间呈指数增长。·除了Web开发框架,云计算和IT认证(包括AWS、CompTIA和Docker)之外,

谷歌云重磅推出混合云平台Anthos,兼容竞争对手云服务 | Google Cloud Next’19

大数据文摘出品作者:蒋宝尚、周素云当地时间4月9日,谷歌云年度盛会GoogleCloud Next’19在旧金山的Moscone召开。在会上,谷歌云的新任CEO,曾经的甲骨文二号人物ThomasKur

element-ui tree懒加载时获取节点DOM

tree提供的方法貌似没有可以直接获取节点DOM,或者点击勾选节点响应函数参数node其实只是传入data的数据对象,拿不到DOM,得想想法子来获取之事情是这样的:最近做一个表单,要能勾选一个二级的下

Element-UI 导航菜单,部分贴底

如下图,导航一二三四的高度小于100%时,接口文档贴底,大于100%时,接口文档显示在最底端。其实类似于FooterStick,但是由于导航菜单子组件的某些属性,已有的FooterStick解决方案并