Cara menggunakan Vue3+ts untuk membangunkan ProTable

Pelaksanaan bahagian hadapan

Kesan pencapaian

Timbunan teknologi

vue3 + skrip taip + elemen-tambah

Cara menggunakan

<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内容都在表格内部处理好， columnsType进行区分-->
    <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 &#39;vue&#39;
import ProTable from &#39;./components/ProTable/index.vue&#39;
import { ColumnProps, RequestUrl } from &#39;./components/ProTable/types&#39;
import { projectConfig, projectConfigBatchDelete } from &#39;./service/api&#39;
const activeName = ref(&#39;user&#39;)
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: &#39;ProTable&#39;,
    name: &#39;user&#39;,
    columns: [
      {
        key: &#39;userName&#39;,
        title: &#39;用户名&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;password&#39;,
        title: &#39;密码&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;email&#39;,
        title: &#39;邮箱&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;phone&#39;,
        title: &#39;手机号&#39;,
        searchType: &#39;el-input&#39;
      },
      {
        key: &#39;role&#39;,
        title: &#39;角色&#39;,
        searchType: &#39;z-select&#39;,
        attrs: {
          options: [
            {
              label: &#39;管理员&#39;,
              value: &#39;admin&#39;
            },
            {
              label: &#39;普通用户&#39;,
              value: &#39;user&#39;
            }
          ]
        }
      },
      {
        key: &#39;status&#39;,
        title: &#39;状态&#39;,
        searchType: &#39;z-select&#39;,
        attrs: {
          options: [
            {
              label: &#39;启用&#39;,
              value: 1
            },
            {
              label: &#39;禁用&#39;,
              value: 0
            }
          ]
        },
        columnType: &#39;status&#39;
      },
      {
        key: &#39;hasUseArray&#39;,
        title: &#39;是否使用数组参数?&#39;,
        search: false,
        searchType: &#39;useExpandField&#39;,
        show: false,
        add: false
      },
      {
        key: &#39;arrayParams&#39;,
        title: &#39;数组参数&#39;,
        searchType: &#39;z-array&#39;,
        search: false,
        width: 120,
        add: false,
        show: false
      },
      {
        key: &#39;hasUseArray&#39;,
        title: &#39;是否使用JSON参数?&#39;,
        search: false,
        searchType: &#39;useExpandField&#39;,
        show: false,
        add: false
      },
      {
        key: &#39;jsonParams&#39;,
        title: &#39;JSON参数&#39;,
        searchType: &#39;z-json&#39;,
        search: false,
        width: 120,
        add: false,
        show: false
      },
      {
        key: &#39;createdAt&#39;,
        title: &#39;创建时间&#39;,
        width: 180,
        searchType: &#39;el-date-picker&#39;,
        add: false
      },
      {
        key: &#39;updatedAt&#39;,
        title: &#39;更新时间&#39;,
        width: 180,
        searchType: &#39;el-date-picker&#39;,
        add: false
      },
      {
        key: &#39;action&#39;,
        title: &#39;操作&#39;,
        search: false,
        add: false,
        width: 150
      }
    ]
  }
])
</script>
<style lang="less">
</style>

Idea reka bentuk ProTable

Halaman dibahagikan kepada 5 kawasan,

• Borang carian kawasan

• Kawasan butang fungsi jadual

• Kawasan operasi di sudut kanan atas meja

• Jadual kawasan tema

• Kawasan kelui meja

Isu untuk dipertimbangkan?

• Kawasan mana yang patut menyokong slot masuk?

• Adakah slot asal borang diserahkan kepada pengguna untuk penghantaran, atau adakah ia perlu dikapsulkan secara dalaman? Contohnya, apabila colum ialah status, ia perlu dipetakan kepada tag, apabila ia adalah jenis 数组, ia dipetakan ke jadual, dan apabila ia json, ia perlu diklik untuk melihat butiran? Ia akan menjadi terlalu menyusahkan untuk memproses setiap jadual Kami berharap untuk mengawalnya melalui medan.

• Adakah lajur dengan column perlu disalin?

• Medan lajur perlu diedit?

Apakah butiran dalam proses pelaksanaan?

• Ketinggian meja, biarkan pengguna mengawal saiz kawasan yang boleh dilihat boleh jadual dan letakkan butang operasi kelompok di bahagian bawah (fixed kedudukan). Dengan cara ini pengguna boleh melihat kandungan jadual di kawasan terbesar.

Gaya pengekodan

• Jika terdapat lebih daripada tiga atribut pada komponen, bungkusnya dalam baris baharu

• Gunakan eslint ialah gaya standard.

petua css

<div class=&#39;box&#39;>
  <div class=&#39;z&#39;></div>
</div>

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

Jika kotak ditukar menjadi elemen 行内, jika ia masih elemen sebaris, akan ada jurang, yang akan menyebabkan Ketinggiannya berbeza daripada ketinggian elemen induk. seperti berikut.

Penyelesaiannya juga sangat mudah Anda perlu menetapkan atribut vertical-align elemen anaknya, atau tetapkan font-size: 0 Sebab asasnya ialah teks tengah elemen juga menduduki Lokasi. Atau jika anda tidak menggunakan inline-block dan menggunakan atribut inline-flex, tiada masalah sama sekali, kerana atribut ini juga digunakan secara meluas dalam pustaka komponen element-plus, dan keserasian juga sangat bagus. Penyelesaian untuk

telah diketahui sejak sekian lama, tetapi hubungan antara vertical-algin dan line-height masih agak kabur, dan saya tidak pernah mendalaminya.

Letakkan dua artikel

Atribut penjajaran menegak CSS

Saya juga memikirkan baselineperkara ini dalamflex, selaraskan -item atribut: Atribut pada paksi silang adalah serupa.

Penjelasan terperinci tentang tutorial sintaks reka letak fleksibel

Operasi jadual

• Selepas menambah data, apabila mendapatkan semula data, pageIndex hendaklah ditetapkan semula kepada 1 dan dipadam Begitu juga dengan data.

• Apabila mengedit data, pageIndex kekal tidak berubah dan kekal sebagai nombor halaman semasa.

• Ringkasnya, apabila bilangan item data berubah, pageIndex akan ditetapkan semula kepada 1. Apabila operasi pengguna tidak menjejaskan jumlah data, pageSize kekal tidak berubah.

Ringkasan

• menggunakan pustaka yang boleh memantau perubahan dalam saiz elemen dom, ubah saiz-pemerhati-polyfill.

• Dalam 3.x, jika elemen mentakrifkan kedua-dua v-bind="object" dan atribut bebas yang serupa. Pembangun boleh memilih yang mana satu untuk disimpan.

Alamat dokumen # tingkah laku gabungan v-bind

Artikel rujukan

JavaScript API——ResizeObserver penggunaan

Fungsi kemudian pemprosesan perhubungan antara medan

• lanjutan belum difikirkan lagi.

• Kembangkan slot

• dan seterusnya. .

Lelaran....

Pelaksanaan latar belakang

Pangkalan data mysql

I The yang digunakan di sini dipasang oleh xampp, mari semak versi. Apakah versi ini? Ia palsu, adakah ia benar-benar 10? Jangan risau tentangnya buat masa ini, selagi ia berkesan.

Buat jadual

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;

Projek baharu

npm init egg --type=simple

Direktori projek secara kasarnya seperti berikut,

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的时候传入dialectOptions参数，及timezone

timezone: '+08:00',  // 改为标准时区
dialectOptions: {
  dateStrings: true,
  typeCast: true,
},

下面就开始编写

controller

对这块需要安装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;
    // 固定的查询参数
    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' ]);
    // 需要模糊查询的参数
    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), // 每页显示数量
      offset: (pageIndex - 1) * pageSize, // 当前页数
    };
    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结构') FROM 表名;

sequelize高级查询

Post.findAll({
  where: sequelize.where(sequelize.fn('char_length', sequelize.col('content')), 7)
});
// SELECT ... FROM "posts" AS "post" WHERE char_length("content") = 7

中文文档，英文看的吃力，看中文的也无妨，不寒碜。^_^

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

先快速测试一把，然后去对前端代码。

ts用到的一些

• 在类型别名（type alias）的声明中可以使用 keyof、typeof、in 等关键字来进行一些强大的类型操作

interface A {
  x: number;
  y: string;
}
// 拿到 A 类型的 key 字面量枚举类型，相当于 type B = 'x' | 'y'
type B = keyof A;
const json = { foo: 1, bar: 'hi' };
// 根据 ts 的类型推论生成一个类型。此时 C 的类型为 { foo: number; bar: string; }
type C = typeof json;
// 根据已有类型生成相关新类型，此处将 A 类型的所有成员变成了可选项，相当于 type D = { x?: number; y?: string; };
type D = {
  [T in keyof A]?: A[T];
};

在比如用一个联合类型来约束对象的key，用interface我就没实现，貌似.

export type FormItemType = 'el-input' | 'z-select' | 'el-date-picker'
// 目前发现 interface 的key 只能是三种 string number symbol   keyof any
type IPlaceholderMapping = {
  [key in FormItemType]: string
}
export const placeholderMapping: IPlaceholderMapping = {
  'el-input': '请输入',
  'z-select': '请选择',
  'el-date-picker': '请选择日期'
}

Atas ialah kandungan terperinci Cara menggunakan Vue3+ts untuk membangunkan ProTable. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!