您现在的位置是：网站首页> 编程资料编程资料

使用Vue3+ts 开发ProTable源码教程示例_vue.js_

2023-05-24 480人已围观

简介使用Vue3+ts 开发ProTable源码教程示例_vue.js_

前台实现

实现效果

技术栈

vue3 + typescript + element-plus

使用方法

ProTable 设计思路

页面整体分为5个区域，

表单搜索区域
表格功能按钮区域
表格右上角操作区域
表格主题区域
表格分页区域

要考虑的问题？

那些区域是要支持传入slot的？
表格原有的slot是否要交给用户来传递,还是在内部进行封装？如colum是状态的时候需要映射成tag，是数组类型的时候映射成表格，是json的时候需要点击查看详情？假设每个表格都要处理的的话就太麻烦，我们希望通过一个字段来控制它。
有column的某一列是否需要复制的功能？
列字段需要编辑的功能？

实现的过程中有哪些细节？

表格的高度，把可表格可视区域的大小交给用户自己来控制，把批量操作按钮放在最下面(fixed定位)。这样用户可以在最大区域内看到表格的内容。

编码风格

组件上面属性如果超过三个，就换行
eslint使用的是standard风格。

css 小知识

*{ box-sizing: border-box; } .box{ display: inline-block; vertical-align: top; } .z{ height: 32px; border: 1px solid; width: 100px; display: inline-block; }

如果把盒子变成了行内元素之后，若其内部还是行内元素，那么就会产生间隙，就会导致其高度与父元素高度不同。如下。

解决方法也很简单，则需要设置其子元素的vertical-align属性，或者设置font-size: 0，其根本原因是因为中间的文本元素也占位置。再或者不使用inline-block,换做inline-flex属性完全没有问题，因为在element-plus组件库中也大量的使用了这个属性，兼容性也很nice。

这个几个解决方法很早就知道了，就是关于vertical-algin这个，以及与line-height的关系还是有点模糊，一直也没去深究。

放两篇文章

CSS vertical-align 属性

还有联想到baseline这个东西在flex,align-items属性：交叉轴上的一个属性很像。

flex布局语法教程详解

表格操作

添加数据之后，重新获取数据的时候pageIndex要重置为1，删除数据的时候也是一样。
编辑数据的时候，pageIndex不变，还是当前页码。
总结下来，就是当数据条数会发生改变的时候，都会重置pageIndex为1。当用户操作不会影响数据总条数的时候，pageSize还维持当前不变。

小结

使用了一个库，可以监听dom元素大小的变化，resize-observer-polyfill。
在 3.x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute。开发者可以自己选择要保留哪一个。

文档地址# v-bind 合并行为

参考文章

JavaScript API——ResizeObserver 的使用

后期功能扩展

字段之间有关联关系情况的处理，暂时还没想好。
扩展一下slot
等等。。

迭代中....

后台实现

数据库 mysql

我这里使用的是 xampp安装的，我们来查看一下版本。这是什么版本？假的吧，真的到10了吗？先不管了，能用就行。

建表

CREATE TABLE `project_config` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '主键', `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '配置类型', `value` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '配置的json字符串', `created_at` datetime NOT NULL, `updated_at` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 65 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = COMPACT;

新建项目

npm init egg --type=simple

项目目录大致如下所示，

RESTful 风格的 URL 定义

Sequelize

npm install --save egg-sequelize mysql2

在 config/plugin.js 中引入 egg-sequelize 插件，这里我们引入了一个库egg-cors来帮我们实现cors。

'use strict'; /** @type Egg.EggPlugin */ exports.sequelize = { enable: true, package: 'egg-sequelize', }; exports.cors = { enable: true, package: 'egg-cors', };

在 config/config.default.js 中编写 sequelize 配置

/* eslint valid-jsdoc: "off" */ 'use strict'; /** * @param {Egg.EggAppInfo} appInfo app info */ module.exports = appInfo => { /** * built-in config * @type {Egg.EggAppConfig} **/ const config = exports = {}; // use for cookie sign key, should change to your own and keep security config.keys = appInfo.name + '_1655529530112_7627'; // add your middleware config here config.middleware = []; config.security = { csrf: { enable: false, ignoreJSON: true, }, }; config.cors = { origin: '*', allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH', }; // add your user config here const userConfig = { // myAppName: 'egg', }; // sequelize const sequelize = { dialect: 'mysql', host: '127.0.0.1', port: 3306, username: 'root', password: '123456', database: 'test_database', timezone: '+08:00', dialectOptions: { dateStrings: true, typeCast: true, }, define: { freezeTableName: true, // 模型名强制和表明一致 underscored: true, // 字段以下划线（_）来分割（默认是驼峰命名风格） }, }; return { ...config, ...userConfig, sequelize, }; };

1、时间格式化

类型需要采用：Sequelize.DATE

初始化Sequelize的时候传入dial

上一篇：微信小程序调用摄像头实现拍照功能_javascript技巧_

下一篇：微信小程序实现数字滚动动画_javascript技巧_