element-crud-table

基于 vue3 + element-plus 构建的业务表格组件

特性介绍

零件化，精细化控制，免去难以理解的配置化。内置12个功能组件（零件）！
只对 element-plus 做增强，没有任何侵入代码。
仅仅提供几个后端接口，就可以完成增删改查（接口返回需要有一些约定）；加载、分页、搜索、新增、编辑就可以自动完成！
支持所有表单元素

使用

安装与引入

安装

vue版本必须3.2+
安装 element-plus

// pnpm
pnpm add element-crud-table
// yarn
yarn add element-crud-table

全部引入

// 引入element-plus
import {createApp} from 'vue'
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

import ElementCrudTable from "element-crud-table";
import "element-crud-table/dist/style.css";
createApp(App)
    .use(ElementPlus, {locale: zhCn})
    .use(ElementCrudTable)
    .mount('#app')

按需引入

// 引入element-plus
import {createApp} from 'vue'
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

import {CrudTable, CrudTableData, CrudTablePagination} from "element-crud-table";
import "element-crud-table/dist/style.css";
createApp(App)
    .use(ElementPlus, {locale: zhCn})
    .use(CrudTable)
    .use(CrudTableData)
    .use(CrudTablePagination)
    .mount('#app')

基本使用

1、简单的展示数据（不分页数据）。

接口返回数据需如下：

{
  "data": []
}

页面示例代码

<template>
  <crud-table>
    <crud-table-data url="http://localhost:5000/list">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </crud-table-data>
  </crud-table>
</template>

2、添加分页，只需要使用 crud-table-pagination 包裹数据组件即可。

此时接口返回的数据必须如下所示：

{
  "data": {
    "records": [],
    "total": 156
  }
}

页面示例代码

<template>
  <crud-table>
    <crud-table-pagination>
      <crud-table-data url="http://localhost:5000/list2">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
      </crud-table-data>
    </crud-table-pagination>
  </crud-table>
</template>

3、添加头部与搜索栏

页面示例代码

<template>
  <crud-table>
    <crud-table-header inline>
      <crud-table-search>
        <el-form-item prop="name">
          <el-input placeholder="姓名"/>
        </el-form-item>
        <el-form-item prop="age">
          <el-input placeholder="年龄"/>
        </el-form-item>
        <el-form-item prop="address">
          <el-input placeholder="地址"/>
        </el-form-item>
      </crud-table-search>
    </crud-table-header>
    <crud-table-pagination>
      <crud-table-data url="http://localhost:5000/list2">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
      </crud-table-data>
    </crud-table-pagination>
  </crud-table>
</template>

4、完整示例：数据操作：新增、预览、编辑与删除

代码

<template>
  <crud-table>
    <crud-table-header inline>
      <crud-table-search>
        <el-form-item prop="name">
          <el-input placeholder="姓名"/>
        </el-form-item>
        <el-form-item prop="age">
          <el-input placeholder="年龄"/>
        </el-form-item>
        <el-form-item prop="address">
          <el-input placeholder="地址"/>
        </el-form-item>
      </crud-table-search>
      <crud-table-action>
        <crud-table-btn-add url="http://localhost:5000/add"/>
      </crud-table-action>
    </crud-table-header>
    <crud-table-pagination>
      <crud-table-data url="http://localhost:5000/list2">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <crud-table-handler>
          <crud-table-btn-preview/>
          <crud-table-btn-edit url="http://localhost:5000/edit"/>
          <crud-table-btn-del url="http://localhost:5000/del"/>
        </crud-table-handler>
      </crud-table-data>
    </crud-table-pagination>
    <crud-table-dialog>
      <el-form-item label="名称" prop="name">
        <el-input/>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input/>
      </el-form-item>
    </crud-table-dialog>
  </crud-table>
</template>

参考

可以在注册的时候，提供请求自定义请求方法，默认组件内部使用 fetch 进行网路请求


//你自定义的请求方法
import request from '/path'
app.use(ElementTablePlus,{requestMethod:request})


//按需引入时
import request from '/path'
import {CrudTable,CrudTableData} from 'element-crud-table'
app.use(CrudTable,{requestMethod:request})
    .use(CrudTableData)

1、CrudTable 【required】

描述：顶层容器

attributes

参数	说明	类型	默认值
gap	header、data、main 之间的间隙	number	0

events

方法	说明	回调
ready	组件加载完成	组件实例方法

2、CrudTableData 【required】

描述：数据引擎容器
内部使用 el-table-column 显示列

参数	说明	类型	默认值
url	数据列表接口地址	string	required
autoLoad	在组件挂载时自动加载数据	boolean	true

3、CrudTablePagination

描述：包裹CrudTableData，提供分页功能

参数	说明	类型	默认值
pageSize	每页数据大小	number	15

4、CrudTableHeader

描述：头部容器，有头部需求时可以使用

参数	说明	类型	默认值
inline	是否使用 inline-flex 布局	boolean	false

5、CrudTableSearch

描述：搜索表单容器，含有一个默认插槽，用于渲染表单
内部使用 el-form-item 包裹表单元素且要提供prop属性，提供的prop属性就是发送到后端的字段；
表单元素会自动绑定v-model，无需手动绑定

参数	说明	类型	默认值
defaultFields	表单项默认值	object
formatter	字段格式器,使用参考	function 或 object

6、CrudTableDialog

描述：弹窗表单容器，含有一个默认插槽，用于渲染新增、编辑的表单
内部使用 el-form-item 包裹表单元素且要提供prop属性，提供的prop属性就是发送到后端的字段；
表单元素会自动绑定v-model，无需手动绑定

内部使用 el-form-item 包裹表单元素，并且必须提供 prop 属性

参数	说明	类型
defaultFields	表单项默认值	object
formProps	el-form props
inFormatter	字段格式器，用于弹窗打开前,使用方式同formatter，参考	function 或 object
outFormatter	字段格式器，用于发送表单前,使用方式同formatter，参考	function 或 object
...rest	支持el-dialog 的其他所有属性

7、CrudTableAction

描述：语义化标签、无特殊功能。头部按钮区：自定义的功能按钮将合理的布局在头部

8、CrudTableHandler

描述：行操作按钮容器，语义化、实际渲染的是一个 el-table-column
默认插槽可以拿到行数据

参数	说明	类型	默认值
...rest	支持el-table-column 的其他所有属性

9、CrudTableBtnAdd

描述：新增按钮，内部绑定对应的功能

参数	说明	类型	默认值
text	按钮文字	string	新增
dialogTitle	打开弹窗时的弹窗标题	string	新增
url	提交新增网络请求的 api 路径	string	required
...rest	支持el-button 的其他所有属性

注意协商后端接口：

假设 url 为 '/api/user' ,在提交请求时，内部不会做转换，请求方式为 'post'，并携带表单请求体

10、CrudTableBtnEdit

描述：编辑按钮，内部绑定对应的功能

参数	说明	类型	默认值
text	按钮文字	string	编辑
dialogTitle	打开弹窗时的弹窗标题	string	编辑
url	提交编辑请求的 api 路径	string	required
echoUrl	回显 api路径；可选，在打开编辑的时候，默认是从表格行中获取数据，若设置了此字段，则从此接口获取数据	string
...rest	支持el-button 的其他所有属性

注意协商后端接口：

假设 url 为 '/api/user' ,在提交请求时，内部会自动转换为 '/api/user/[id]'，请求方式为 'put'，并携带表单请求体
假设 echoUrl 为 '/api/user' ,内部会转换为 '/api/user/[id]'，请求方式为 'get'

11、CrudTableBtnDel

描述：删除按钮，内部绑定对应的功能

参数	说明	类型	默认值
text	按钮文字	string	删除
url	提交删除请求的 api 路径	string	required
...rest	支持el-button 的其他所有属性

注意协商后端接口：

假设 url 为 '/api/user' ,在提交请求时，内部会自动转换为 '/api/user/[id]'，请求方式为 'delete'

12、CrudTableBtnPreview

描述：预览按钮，显示的表单无法编辑

参数	说明	类型	默认值
text	按钮文字	string	查看
dialogTitle	打开弹窗时的弹窗标题	string	预览
echoUrl	回显 api路径；可选，在打开预览的时候，默认是从表格行中获取数据，若设置了此字段，则从此接口获取数据	string
...rest	支持el-button 的其他所有属性

注意协商后端接口：

假设 echoUrl 为 '/api/user' ,内部会转换为 '/api/user/[id]'，请求方式为 'get'

Name		Name	Last commit message	Last commit date
Latest commit History 46 Commits
.vscode		.vscode
examples		examples
mock		mock
src		src
.gitignore		.gitignore
README.md		README.md
attributes.json		attributes.json
index.d.ts		index.d.ts
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tags.json		tags.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
web-types.json		web-types.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

element-crud-table

特性介绍

使用

安装与引入

基本使用

1、简单的展示数据（不分页数据）。

2、添加分页，只需要使用 crud-table-pagination 包裹数据组件即可。

3、添加头部与搜索栏

4、完整示例：数据操作：新增、预览、编辑与删除

参考

1、CrudTable 【required】

attributes

events

2、CrudTableData 【required】

3、CrudTablePagination

4、CrudTableHeader

5、CrudTableSearch

6、CrudTableDialog

7、CrudTableAction

8、CrudTableHandler

9、CrudTableBtnAdd

10、CrudTableBtnEdit

11、CrudTableBtnDel

12、CrudTableBtnPreview

About

Uh oh!

Releases 1

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

element-crud-table

特性介绍

使用

安装与引入

基本使用

1、简单的展示数据（不分页数据）。

2、添加分页，只需要使用 crud-table-pagination 包裹数据组件即可 。

3、添加头部与搜索栏

4、完整示例：数据操作：新增、预览、编辑与删除

参考

1、CrudTable 【required】

attributes

events

2、CrudTableData 【required】

3、CrudTablePagination

4、CrudTableHeader

5、CrudTableSearch

6、CrudTableDialog

7、CrudTableAction

8、CrudTableHandler

9、CrudTableBtnAdd

10、CrudTableBtnEdit

11、CrudTableBtnDel

12、CrudTableBtnPreview

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

2、添加分页，只需要使用 crud-table-pagination 包裹数据组件即可。

Packages