前端提升生产力系列二(vue3 element-plus 配置json快速生成table列表组件)

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

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


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


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


本demo已部署腾讯云 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、 最后的效果图片


image.png


字段配置详细介绍


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、其他字段待补充


......


最后的最后


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


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

目录
相关文章
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
1611 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1270 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
缓存 编解码 数据可视化
uniapp发行快应用 [HBuilder] 23:33:45.537 manifest.json->quickapp-webview 缺少 icon 配置如何解决优雅草卓伊凡
uniapp发行快应用 [HBuilder] 23:33:45.537 manifest.json->quickapp-webview 缺少 icon 配置如何解决优雅草卓伊凡
473 5
uniapp发行快应用 [HBuilder] 23:33:45.537 manifest.json->quickapp-webview 缺少 icon 配置如何解决优雅草卓伊凡
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
651 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
1259 1
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
669 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
1465 4
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
354 0
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
318 0
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
330 0