您好,登錄后才能下訂單哦!
這篇文章主要講解了“如何使用Vue3+ts開發(fā)ProTable”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“如何使用Vue3+ts開發(fā)ProTable”吧!
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>
頁(yè)面整體分為5個(gè)區(qū)域,
表單搜索區(qū)域
表格功能按鈕區(qū)域
表格右上角操作區(qū)域
表格主題區(qū)域
表格分頁(yè)區(qū)域
要考慮的問題?
那些區(qū)域是要支持傳入slot的?
表格原有的slot是否要交給用戶來傳遞,還是在內(nèi)部進(jìn)行封裝?如colum
是狀態(tài)的時(shí)候需要映射成tag
,是數(shù)組
類型的時(shí)候映射成表格,是json
的時(shí)候需要點(diǎn)擊查看詳情?假設(shè)每個(gè)表格都要處理的的話就太麻煩,我們希望通過一個(gè)字段來控制它。
有column
的某一列是否需要復(fù)制的功能?
列字段需要編輯的功能?
實(shí)現(xiàn)的過程中有哪些細(xì)節(jié)?
表格的高度,把可表格可視區(qū)域的大小交給用戶自己來控制,把批量操作按鈕放在最下面(fixed
定位)。這樣用戶可以在最大區(qū)域內(nèi)看到表格的內(nèi)容。
組件上面屬性如果超過三個(gè),就換行
eslint使用的是standard
風(fēng)格。
<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
屬性完全沒有問題,因?yàn)樵?code>element-plus組件庫(kù)中也大量的使用了這個(gè)屬性,兼容性也很nice。
這個(gè)幾個(gè)解決方法很早就知道了,就是關(guān)于vertical-algin
這個(gè),以及與line-height
的關(guān)系還是有點(diǎn)模糊,一直也沒去深究。
放兩篇文章
CSS vertical-align 屬性
還有聯(lián)想到baseline
這個(gè)東西在flex
,align-items屬性:交叉軸上的一個(gè)屬性很像。
flex布局語(yǔ)法教程詳解
添加數(shù)據(jù)之后,重新獲取數(shù)據(jù)的時(shí)候pageIndex
要重置為1,刪除數(shù)據(jù)的時(shí)候也是一樣。
編輯數(shù)據(jù)的時(shí)候,pageIndex
不變,還是當(dāng)前頁(yè)碼。
總結(jié)下來,就是當(dāng)數(shù)據(jù)條數(shù)會(huì)發(fā)生改變的時(shí)候,都會(huì)重置pageIndex
為1
。當(dāng)用戶操作不會(huì)影響數(shù)據(jù)總條數(shù)的時(shí)候,pageSize
還維持當(dāng)前不變。
使用了一個(gè)庫(kù),可以監(jiān)聽dom元素大小的變化,resize-observer-polyfill。
在 3.x 中,如果一個(gè)元素同時(shí)定義了 v-bind="object"
和一個(gè)相同的獨(dú)立 attribute。開發(fā)者可以自己選擇要保留哪一個(gè)。
文檔地址# v-bind 合并行為
參考文章
JavaScript API——ResizeObserver 的使用
字段之間有關(guān)聯(lián)關(guān)系情況的處理,暫時(shí)還沒想好。
擴(kuò)展一下slot
等等。。
迭代中....
我這里使用的是 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
項(xiàng)目目錄大致如下所示,
npm install --save egg-sequelize mysql2
在 config/plugin.js
中引入 egg-sequelize 插件, 這里我們引入了一個(gè)庫(kù)egg-cors
來幫我們實(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
中編寫 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, // 字段以下劃線(_)來分割(默認(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, },
下面就開始編寫
對(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
中文文檔,英文看的吃力,看中文的也無妨,不寒磣。^_^
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; };
'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); };
先快速測(cè)試一把,然后去對(duì)前端代碼。
在類型別名(type alias)的聲明中可以使用 keyof
、typeof
、in
等關(guān)鍵字來進(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)合類型來約束對(duì)象的key
,用interface
我就沒實(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)選擇日期' }
感謝各位的閱讀,以上就是“如何使用Vue3+ts開發(fā)ProTable”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)如何使用Vue3+ts開發(fā)ProTable這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。