使用Vue3+ts?開(kāi)發(fā)ProTable源碼教程示例
更新時(shí)間：2022年07月18日 17:21:29 作者：一咻
這篇文章主要為大家介紹了使用Vue3+ts?開(kāi)發(fā)ProTable源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前臺(tái)實(shí)現(xiàn)
實(shí)現(xiàn)效果
技術(shù)棧
vue3 + typescript + element-plus
使用方法
<template>
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane
:label="item.label"
v-for="(item, index) in templateConfig"
:key="index" :name="item.name"
lazy
>
<!--所有的 slot內(nèi)容都在表格內(nèi)部處理好， columnsType進(jìn)行區(qū)分-->
<pro-table
:columns="item.columns"
:type="item.name"
:request-url="requestUrl"
>
</pro-table>
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ProTable from './components/ProTable/index.vue'
import { ColumnProps, RequestUrl } from './components/ProTable/types'
import { projectConfig, projectConfigBatchDelete } from './service/api'
const activeName = ref('user')
interface TemplateConfig {
name: string
label: string
columns: ColumnProps[],
}
const requestUrl: RequestUrl = {
create: projectConfig,
list: projectConfig,
update: projectConfig,
destroy: projectConfig,
batchDelete: projectConfigBatchDelete
}
const templateConfig = ref<TemplateConfig[]>([
{
label: 'ProTable',
name: 'user',
columns: [
{
key: 'userName',
title: '用戶名',
searchType: 'el-input'
},
{
key: 'password',
title: '密碼',
searchType: 'el-input'
},
{
key: 'email',
title: '郵箱',
searchType: 'el-input'
},
{
key: 'phone',
title: '手機(jī)號(hào)',
searchType: 'el-input'
},
{
key: 'role',
title: '角色',
searchType: 'z-select',
attrs: {
options: [
{
label: '管理員',
value: 'admin'
},
{
label: '普通用戶',
value: 'user'
}
]
}
},
{
key: 'status',
title: '狀態(tài)',
searchType: 'z-select',
attrs: {
options: [
{
label: '啟用',
value: 1
},
{
label: '禁用',
value: 0
}
]
},
columnType: 'status'
},
{
key: 'hasUseArray',
title: '是否使用數(shù)組參數(shù)?',
search: false,
searchType: 'useExpandField',
show: false,
add: false
},
{
key: 'arrayParams',
title: '數(shù)組參數(shù)',
searchType: 'z-array',
search: false,
width: 120,
add: false,
show: false
},
{
key: 'hasUseArray',
title: '是否使用JSON參數(shù)?',
search: false,
searchType: 'useExpandField',
show: false,
add: false
},
{
key: 'jsonParams',
title: 'JSON參數(shù)',
searchType: 'z-json',
search: false,
width: 120,
add: false,
show: false
},
{
key: 'createdAt',
title: '創(chuàng)建時(shí)間',
width: 180,
searchType: 'el-date-picker',
add: false
},
{
key: 'updatedAt',
title: '更新時(shí)間',
width: 180,
searchType: 'el-date-picker',
add: false
},
{
key: 'action',
title: '操作',
search: false,
add: false,
width: 150
}
]
}
])
</script>
<style lang="less">
</style>
ProTable 設(shè)計(jì)思路
頁(yè)面整體分為5個(gè)區(qū)域，
- 表單搜索區(qū)域
- 表格功能按鈕區(qū)域
- 表格右上角操作區(qū)域
- 表格主題區(qū)域
- 表格分頁(yè)區(qū)域
要考慮的問(wèn)題？
- 那些區(qū)域是要支持傳入slot的？
- 表格原有的slot是否要交給用戶來(lái)傳遞,還是在內(nèi)部進(jìn)行封裝？如
colum是狀態(tài)的時(shí)候需要映射成tag，是數(shù)組類型的時(shí)候映射成表格，是json的時(shí)候需要點(diǎn)擊查看詳情？假設(shè)每個(gè)表格都要處理的的話就太麻煩，我們希望通過(guò)一個(gè)字段來(lái)控制它。 - 有
column的某一列是否需要復(fù)制的功能？ - 列字段需要編輯的功能？
實(shí)現(xiàn)的過(guò)程中有哪些細(xì)節(jié)？
- 表格的高度，把可表格可視區(qū)域的大小交給用戶自己來(lái)控制，把批量操作按鈕放在最下面(
fixed定位)。這樣用戶可以在最大區(qū)域內(nèi)看到表格的內(nèi)容。
編碼風(fēng)格
- 組件上面屬性如果超過(guò)三個(gè)，就換行
- eslint使用的是
standard風(fēng)格。
css 小知識(shí)
<div class='box'> <div class='z'></div> </div>
*{
box-sizing: border-box;
}
.box{
display: inline-block;
vertical-align: top;
}
.z{
height: 32px;
border: 1px solid;
width: 100px;
display: inline-block;
}
如果把盒子變成了行內(nèi)元素之后，若其內(nèi)部還是行內(nèi)元素，那么就會(huì)產(chǎn)生間隙，就會(huì)導(dǎo)致其高度與父元素高度不同。如下。
解決方法也很簡(jiǎn)單，則需要設(shè)置其子元素的vertical-align屬性，或者設(shè)置font-size: 0，其根本原因是因?yàn)橹虚g的文本元素也占位置。再或者不使用inline-block,換做inline-flex屬性完全沒(méi)有問(wèn)題，因?yàn)樵?code>element-plus組件庫(kù)中也大量的使用了這個(gè)屬性，兼容性也很nice。
這個(gè)幾個(gè)解決方法很早就知道了，就是關(guān)于vertical-algin這個(gè)，以及與line-height的關(guān)系還是有點(diǎn)模糊，一直也沒(méi)去深究。
放兩篇文章
還有聯(lián)想到baseline這個(gè)東西在flex,align-items屬性：交叉軸上的一個(gè)屬性很像。
表格操作
- 添加數(shù)據(jù)之后，重新獲取數(shù)據(jù)的時(shí)候
pageIndex要重置為1，刪除數(shù)據(jù)的時(shí)候也是一樣。 - 編輯數(shù)據(jù)的時(shí)候，
pageIndex不變，還是當(dāng)前頁(yè)碼。 - 總結(jié)下來(lái)，就是當(dāng)數(shù)據(jù)條數(shù)會(huì)發(fā)生改變的時(shí)候，都會(huì)重置
pageIndex為1。當(dāng)用戶操作不會(huì)影響數(shù)據(jù)總條數(shù)的時(shí)候，pageSize還維持當(dāng)前不變。
小結(jié)
- 使用了一個(gè)庫(kù)，可以監(jiān)聽(tīng)dom元素大小的變化，resize-observer-polyfill。
- 在 3.x 中，如果一個(gè)元素同時(shí)定義了
v-bind="object"和一個(gè)相同的獨(dú)立 attribute。開(kāi)發(fā)者可以自己選擇要保留哪一個(gè)。
文檔地址# v-bind 合并行為
參考文章
JavaScript API——ResizeObserver 的使用
后期功能擴(kuò)展
- 字段之間有關(guān)聯(lián)關(guān)系情況的處理，暫時(shí)還沒(méi)想好。
- 擴(kuò)展一下
slot - 等等。。
迭代中....
后臺(tái)實(shí)現(xiàn)
數(shù)據(jù)庫(kù) mysql
我這里使用的是 xampp安裝的，我們來(lái)查看一下版本。這是什么版本？假的吧，真的到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;
新建項(xiàng)目
npm init egg --type=simple
項(xiàng)目目錄大致如下所示，
RESTful 風(fēng)格的 URL 定義
Sequelize
npm install --save egg-sequelize mysql2
- 在
config/plugin.js中引入 egg-sequelize 插件， 這里我們引入了一個(gè)庫(kù)egg-cors來(lái)幫我們實(shí)現(xiàn)cors。
'use strict';
/** @type Egg.EggPlugin */
exports.sequelize = {
enable: true,
package: 'egg-sequelize',
};
exports.cors = {
enable: true,
package: 'egg-cors',
};
- 在
config/config.default.js中編寫(xiě) 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, // 模型名強(qiáng)制和表明一致
underscored: true, // 字段以下劃線（_）來(lái)分割（默認(rèn)是駝峰命名風(fēng)格）
},
};
return {
...config,
...userConfig,
sequelize,
};
};
1、時(shí)間格式化
類型需要采用：Sequelize.DATE
初始化Sequelize的時(shí)候傳入dialectOptions參數(shù)，及timezone
timezone: '+08:00', // 改為標(biāo)準(zhǔn)時(shí)區(qū)
dialectOptions: {
dateStrings: true,
typeCast: true,
},
下面就開(kāi)始編寫(xiě)
controller
對(duì)這塊需要安裝lodash，懂的都懂。
controller/ProjectConfig.js
'use strict';
const { success } = require('../utils/res');
const { omit, pick } = require('lodash');
const Controller = require('egg').Controller;
class ProjectConfigController extends Controller {
async index() {
const { ctx } = this;
const { pageSize, pageIndex } = ctx.query;
const { Op, fn, col, where, literal } = this.app.Sequelize;
// 固定的查詢參數(shù)
const stableQuery = pick(ctx.query, [ 'type', 'createdAt', 'updatedAt' ]);
const stableQueryArgs = Object.keys(stableQuery)
.filter(key => Boolean(stableQuery[key]))
.map(key => {
return {
[key]: stableQuery[key],
};
});
const whereCondition = omit(ctx.query, [ 'pageIndex', 'pageSize', 'type', 'createdAt', 'updatedAt' ]);
// 需要模糊查詢的參數(shù)
const whereArgs = Object.keys(whereCondition)
.filter(key => Boolean(whereCondition[key]))
.map(key => {
return where(fn('json_extract', col('value'), literal(`\'$.${key}\'`)), {
[Op.like]: `%${whereCondition[key]}%`,
});
});
const query = {
where: {
[Op.and]: [
...stableQueryArgs,
...whereArgs,
],
},
order: [
[ 'createdAt', 'DESC' ],
],
limit: Number(pageSize), // 每頁(yè)顯示數(shù)量
offset: (pageIndex - 1) * pageSize, // 當(dāng)前頁(yè)數(shù)
};
const data = await ctx.model.ProjectConfig.findAndCountAll(query);
ctx.body = success(data);
}
async create() {
const { ctx } = this;
const { type, value } = ctx.request.body;
const data = await ctx.model.ProjectConfig.create({ type, value });
ctx.body = success(data);
}
async update() {
const { ctx } = this;
const { type, value } = ctx.request.body;
const { id } = ctx.params;
const data = await ctx.model.ProjectConfig.update({ type, value }, { where: { id } });
ctx.body = success(data);
}
async destroy() {
const { ctx } = this;
const { id } = ctx.params;
console.log(id);
const data = await ctx.model.ProjectConfig.destroy({ where: { id } });
ctx.body = success(data);
}
async batchDestroy() {
const { ctx } = this;
const { ids } = ctx.request.body;
console.log(ids);
const { Op } = this.app.Sequelize;
const data = await ctx.model.ProjectConfig.destroy({
where: {
id: {
[Op.in]: ids,
},
},
});
ctx.body = success(data);
}
}
module.exports = ProjectConfigController;
模糊查詢
SELECT json_extract(字段名,'$.json結(jié)構(gòu)') FROM 表名;
sequelize高級(jí)查詢
Post.findAll({
where: sequelize.where(sequelize.fn('char_length', sequelize.col('content')), 7)
});
// SELECT ... FROM "posts" AS "post" WHERE char_length("content") = 7
中文文檔，英文看的吃力，看中文的也無(wú)妨，不寒磣。^_^
model
model/project_config.js
'use strict';
module.exports = app => {
const { STRING, INTEGER, TEXT, DATE } = app.Sequelize;
const ProjectConfig = app.model.define('project_config', {
id: { type: INTEGER, primaryKey: true, autoIncrement: true },
type: { type: STRING },
value: {
type: TEXT,
get() {
return this.getDataValue('value') ? JSON.parse(this.getDataValue('value')) : null;
},
set(value) {
this.setDataValue('value', JSON.stringify(value));
},
},
createdAt: { type: DATE },
updatedAt: { type: DATE },
});
return ProjectConfig;
};
router.js
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/api/projectConfig', controller.projectConfig.index);
router.post('/api/projectConfig', controller.projectConfig.create);
router.put('/api/projectConfig/:id', controller.projectConfig.update);
router.delete('/api/projectConfig/:id', controller.projectConfig.destroy);
router.post('/api/projectConfig/batchDelete', controller.projectConfig.batchDestroy);
};
API 文檔 Apifox
先快速測(cè)試一把，然后去對(duì)前端代碼。
ts用到的一些
- 在類型別名（type alias）的聲明中可以使用
keyof、typeof、in等關(guān)鍵字來(lái)進(jìn)行一些強(qiáng)大的類型操作
interface A {
x: number;
y: string;
}
// 拿到 A 類型的 key 字面量枚舉類型，相當(dāng)于 type B = 'x' | 'y'
type B = keyof A;
const json = { foo: 1, bar: 'hi' };
// 根據(jù) ts 的類型推論生成一個(gè)類型。此時(shí) C 的類型為 { foo: number; bar: string; }
type C = typeof json;
// 根據(jù)已有類型生成相關(guān)新類型，此處將 A 類型的所有成員變成了可選項(xiàng)，相當(dāng)于 type D = { x?: number; y?: string; };
type D = {
[T in keyof A]?: A[T];
};
在比如用一個(gè)聯(lián)合類型來(lái)約束對(duì)象的key，用interface我就沒(méi)實(shí)現(xiàn)，貌似.
export type FormItemType = 'el-input' | 'z-select' | 'el-date-picker'
// 目前發(fā)現(xiàn) interface 的key 只能是三種 string number symbol keyof any
type IPlaceholderMapping = {
[key in FormItemType]: string
}
export const placeholderMapping: IPlaceholderMapping = {
'el-input': '請(qǐng)輸入',
'z-select': '請(qǐng)選擇',
'el-date-picker': '請(qǐng)選擇日期'
}
倉(cāng)庫(kù)地址
以上就是使用Vue3+ts 開(kāi)發(fā)ProTable源碼教程示例的詳細(xì)內(nèi)容，更多關(guān)于Vue3+ts 開(kāi)發(fā)ProTable的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
MVVM 是Model-View-ViewModel 的縮寫(xiě)，它是一種基于前端開(kāi)發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫(kù)，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧2016-11-11
vue中post請(qǐng)求以a=a&b=b 的格式寫(xiě)遇到的問(wèn)題
這篇文章主要介紹了vue中post請(qǐng)求以a=a&b=b 的格式寫(xiě)遇到的問(wèn)題,需要的朋友可以參考下2018-04-04
Vue實(shí)現(xiàn)過(guò)渡效果的基本方法
Vue 提供了一個(gè)強(qiáng)大的過(guò)渡系統(tǒng),可以用于在進(jìn)入、離開(kāi)和列表渲染時(shí)添加各種動(dòng)畫(huà)效果,這些過(guò)渡不僅能夠提升用戶體驗(yàn),還能使界面更加生動(dòng)和吸引人,本文將介紹 Vue 中實(shí)現(xiàn)過(guò)渡效果的基本方法,并提供使用 setup 語(yǔ)法糖的代碼示例,需要的朋友可以參考下2024-09-09
vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作
這篇文章主要介紹了vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue elementui簡(jiǎn)易側(cè)拉欄的使用小結(jié)
這篇文章主要介紹了vue elementui簡(jiǎn)易側(cè)拉欄的使用,增加了側(cè)拉欄,目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
一步步教你搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境
這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個(gè)人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開(kāi)發(fā)中異步請(qǐng)求是非常常見(jiàn)的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例
今天小編就為大家分享一篇vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue如何將字符串的一部分處理為html文檔并渲染到頁(yè)面
這篇文章主要介紹了vue如何將字符串的一部分處理為html文檔并渲染到頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06