️本文为博客园首发文章,未获授权禁止转载

大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️。

个人github仓库地址: https:github.com/aehyok

本文讲解代码仓库地址 : https:github.com/aehyok/vue-qiankun 目前基于dev分支进行开发和测试

本demo已部署腾讯云 http://vue.tuokecat.com(服务器配置较低,如有访问比较慢,请耐心等待)

table列表json配置生成器

  • 1、 在PC端日常的使用中,使用最多的过于表单和列表了,故此对table列表和form表单进行了统一的封装,通过json配置就可以快速适配table列表和form表单。

  • 2、封装思路

    • A、列表的搜索条件和搜索按钮,这个与table 可以解耦,目前放到单独的组件中,所以本节暂不考虑
    • B、table列表显示字段,根据不同的类型进行制定
    • C、最右侧的操作按钮的配置,比如(行编辑、删除等操作),根据定义的函数进行注入,后面实现函数操作进行自定义,不与table列表冲突
    • D、特殊的字段,比如(序号字段、多选框、单选框等等)
    • E、最后当然少不了分页器的参与
  • 3、本章节主要记录自己的table封装


先来一个完整的效果展示

  • 1、列表展示字段的配置json
  {
type:'checkbox',
},
{
type:'index',
},
{
prop: "title",
label: "标题",
align: "center",
},
{
prop: "createTime",
label: "创建时间",
align: "center",
dateFormat: "yyyy-MM-dd HH:mm:ss",
sortable: true
},
{
prop: "state",
label: "状态",
align: "center",
dictionary: [
{ code: 0, name: "待审核"},
{ code: 1, name: "已审核"},
{ code: 2, name: "审核中"},
]
},
{
prop:"custom",
label:"自定义",
align: "center",
html: (row, column) => {
return row.title==="编号3" ? `<span style="color: red;">${ row.remark }</span>`:`未定义`
}
}

最后一个字段 custom 可以通过配置html,自定义展示复杂的组件和样式介入

  • 2、右侧操作按钮的配置信息
{
width: 200,
fixed: "right",
list: [
{
id: "1",
label: "查看",
type: "text",
show: true,
disabled: false,
method: (index, row, ss) => {
handleDetail(index, row, ss);
}
},
{
id: "2",
label: "删除",
type: "text",
show: true,
disabled: false,
method: (index, row) => {
handleDel(index, row);
}
}
]
}

其中的handleDetail和handleDel函数通过自定义实现业务对接即可。

  • 3、 最后的效果图片

字段配置详细介绍

1、普通字段直接配置

```javascript
{
prop: "name",
label: "设施名称",
align: "center",
}
```

2、序号字段配置(后期可直接配置自定义序号,暂时从 1 自增+1)

```javascript
{
type: "index"
}
```

3、checkbox 字段配置(后期可添加单选框的配置)

```javascript
{
type: "checkbox"
}
```

4、日期格式字段配置,可设置转换格式

```javascript
{
prop: "recorDate",
label: "返乡日期",
align: "center",
dateFormat: "yyyy-MM-dd"
},
```

5、字典数据转换

```javascript
{
prop: "sex",
label: "性别",
align: "center",
dictionary:[
{
code: 1, name:'男',
},
{
code: 2, name:'女',
}
]
},
```

6、自定义字段展示内容

```javascript
{
prop: "",
label: "自定义",
align: "center",
html: (row, column) => {
return row.name==="集资球场" || row.address ==="22" ? `<span style="color: red;">${ row.address }</span>`:`222`
}
},
```

7、显示 image

```javascript
{
prop: "image",
label: "自定义",
align: "center",
image:'image'
},
```

8、设置字段排序(前端自动排序)

```javascript
{
prop: "image",
label: "自定义",
align: "center",
sortable: true
},
```

9、设置字段自定义调用接口排序

```javascript
{
prop: "image",
label: "自定义",
align: "center",
sortable: "custom", // 通过传递的search查询函数中添加了orders排序字段
}
```

10、其他字段待补充

......

最后的最后

https://github.com/aehyok/vue-qiankun

本文中不涉及到封装的组件代码,有关代码问题可以访问文章开头的微前端github demo 仓库,github仓库将会保持持续更新,不断优化小demo。

https://github.com/aehyok/2021

最后自己每天工作中的笔记记录仓库,主要以文章链接和问题处理方案为主。

vue3 element-plus 配置json快速生成table列表组件,提升生产力近500%(已在公司使用,持续优化中)的更多相关文章

  1. vue3 element-plus 配置json快速生成form表单组件,提升生产力近600%(已在公司使用,持续优化中)

    ️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...

  2. GreenDao 工具类 --- 使用 Json 快速生成 Bean、表及其结构,"炒鸡"快!

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  3. 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成

    在我们基于框架开发系统的时候,往往对一些应用场景的页面对进行了归纳总结,因此对大多数情况下的页面呈现逻辑都做了清晰的分析,因此在我们基于框架的基础上,增量式开发业务功能的时候,能够事半功倍.代码生成工 ...

  4. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  5. 列表(list)之二 -运用篇 -快速生成规律性列表

    生成列表[1*2,3*4,5*6,7*8,9*10,11*12] 方法一:list1=[]for i in range(1,13,2): list1.append(i*(i+1))print(list ...

  6. 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

  7. 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

  8. python快速生成注释文档的方法

    python快速生成注释文档的方法 今天将告诉大家一个简单平时只要注意的小细节,就可以轻松生成注释文档,也可以检查我们写的类方法引用名称是否重复有问题等.一看别人专业的大牛们写的文档多牛多羡慕,不用担 ...

  9. 设置idea快速生成doc comment

    在eclipse中快速生成方法的doc comment快捷键是Alt+Shift+J, 而在idea中没有对应的快捷键,但是能实现相似的功能. 1.在方法上面输入/** 然后回车就可以生成注释了. 2 ...

随机推荐

  1. 并发控制--context篇

    目录 1. 前言 2 Context 实现原理 2.1 接口定义 2.1 cancelCtx 2.1.1 Done()接口实现 2.1.2 Err()接口实现 2.1.3 cancel()接口实现 2 ...

  2. 自己封装一个Object.freeze()方法

    1.遍历所有属性和方法 2.修改遍历到的属性的描述 3.Object.seal() Object.defineProperty(Object,'freezePolyfill',{ value:func ...

  3. WIN7下安装Python3.7和labelImg-1.7.0

    安装python3.7 官方https://www.python.org/downloads/windows/,下载windows 64bit python3.7版本 用Administrator权限 ...

  4. Python3-sqlalchemy-orm 多对多关系建表、插入数据、查询数据

    现在来设计一个能描述"图书"与"作者"的关系的表结构,需求是 一本书可以有好几个作者一起出版 一个作者可以写好几本书 此时你会发现,用之前学的外键好像没办法实现 ...

  5. BUUCTF-[CISCN2019 华东南赛区]Web4

    BUUCTF-[CISCN2019 华东南赛区]Web4 看题 点击Read somethings,会跳转到 http://3fd8b1f9-614f-47ff-8e79-0f678e7bb4eb.n ...

  6. pip 源的问题

    pip install -i https://pypi.doubanio.com/simple/ --trusted-host pypi.douban.com some-package

  7. Vue Abp vNext获取当前登录用户

    系统默认提供了获取当前用户的api方法 https://localhost:44364/api/identity/my-profile 手工实现方法:abp后台获取当前用户需要在AppService应 ...

  8. gohbase使用文档

    目录 1. 建立连接 2. 创建表 3. 插入记录 4. 删除记录 5. 查询记录 5.1 根据RowKey查询 5.2 scan范围查询 5.3 复杂查询(过滤器的使用) 5.3.1 比较过滤器 5 ...

  9. Map集和

    目录 Map 特点 继承树 常用方法 entrySet 方法 HashMap 特点 HashMap 的重要常量 存储结构 jdk1.8 总结 面试题 HashMap存储自定义类型键值 LinkedHa ...

  10. Sonarqube C# 配置资料整理

    c#配置方式: http://www.cnblogs.com/CoderAyu/p/9416376.html http://www.cnblogs.com/jingridong/p/6513884.h ...