el-crud-table-v2

基于 vue2 + element-ui 构建的业务表格组件

特性介绍

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

使用

开发时使用的element-ui版本
element-ui: 2.15.6

安装与引入

安装

vue
安装 element-ui

# npm
npm i el-crud-table-v2

# pnpm
pnpm add el-crud-table-v2

# yarn
yarn add el-crud-table-v2

全部引入

import Vue from 'vue'
import App from './App.vue'

// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入我们的组件
import CrudTableV2 from 'el-crud-table-v2'
import 'el-crud-table-v2/dist/style.css'

Vue.use(ElementUI)
Vue.use(CrudTableV2)

new Vue({
  el: '#app',
  render: h => h(App),
})

按需引入

import Vue from 'vue'
import App from './App.vue'

// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 按需导入组件
import { CrudTable, CrudTableData, CrudTablePagination } from 'el-crud-table-v2'
import 'el-crud-table-v2/dist/style.css'

Vue.use(ElementUI)
Vue.use(CrudTable)
Vue.use(CrudTableData)
Vue.use(CrudTablePagination)

new Vue({
  el: '#app',
  render: h => h(App),
})

完整组件列表

import {
  CrudTable,
  CrudTableData,
  CrudTablePagination,
  CrudTableHeader,
  CrudTableSearch,
  CrudTableColumn,
  CrudTableAction,
  CrudTableBtnAdd,
  CrudTableHandler,
  CrudTableBtnPreview,
  CrudTableBtnEdit,
  CrudTableBtnDel,
  CrudTableDialog,
} from 'el-crud-table-v2'

全局配置

在引入 CrudTable 时，可以传入一个全局配置对象。该对象目前支持 requestMethod 与 requestKeys 字段。requestMethod 用于改变组件的默认请求方法（内部使用fetch进行网络请求），requestKeys 设置读取请求结果的key。

// 内部默认值
const requestKeys = {
  dataKey: 'result',
  totalKey: 'total',
  pageKey: 'pageNo',
  sizeKey: 'pageSize',
}

requestKeys 可按需配置键名

完整引入

import Vue from 'vue'
import App from './App.vue'

// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入我们的组件
import CrudTableV2 from 'el-crud-table-v2'
import 'el-crud-table-v2/dist/style.css'

// 你自定义的请求方法
import request from '@/utils/request'

const requestKeys = { dataKey: 'list', totalKey: 'count', pageKey: 'page', sizeKey: 'limit' }
Vue.use(ElementUI)
Vue.use(CrudTableV2, { requestMethod: request, requestKeys })

new Vue({
  el: '#app',
  render: h => h(App),
})

按需引入

import Vue from 'vue'
import App from './App.vue'

// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 按需导入组件
import { CrudTable, CrudTableData, CrudTablePagination } from 'el-crud-table-v2'
import 'el-crud-table-v2/dist/style.css'

// 你自定义的请求方法
import request from '@/utils/request'

const requestKeys = { dataKey: 'list', totalKey: 'count', pageKey: 'page', sizeKey: 'limit' }

Vue.use(ElementUI)
Vue.use(CrudTable, { requestMethod: request, requestKeys })
Vue.use(CrudTableData)
Vue.use(CrudTablePagination)

new Vue({
  el: '#app',
  render: h => h(App),
})

基本使用

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

接口返回数据需如下：

{
  "data": []
}

页面示例代码

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

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

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

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

页面示例代码

<template>
  <crud-table-v2 url="http://localhost:5000/list2">
    <crud-table-pagination>
      <crud-table-data>
        <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-v2>
</template>

3、添加头部与搜索栏

页面示例代码

<template>
  <crud-table-v2 url="http://localhost:5000/list2">
    <crud-table-header inline>
      <crud-table-search>
        <template #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>
        </template>
      </crud-table-search>
    </crud-table-header>
    <crud-table-pagination>
      <crud-table-data>
        <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-v2>
</template>

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

代码

<template>
  <crud-table-v2 url="/testStudentList">
    <crud-table-header :inline="false">
      <crud-table-search>
        <template #search>
          <el-form-item label="姓名" prop="name">
            <el-input clearable placeholder="姓名" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input clearable placeholder="年龄" />
          </el-form-item>
        </template>
      </crud-table-search>
      <crud-table-action>
        <crud-table-btn-add url="/testStudentList/add" />
      </crud-table-action>
    </crud-table-header>

    <crud-table-pagination>
      <crud-table-data>
        <el-table-column label="name" prop="name" algin="center" />
        <el-table-column label="age" prop="age" algin="center" />
        <crud-table-handler width="150px">
          <template #hander>
            <crud-table-btn-preview />
            <crud-table-btn-edit style="color: #67C23A;" url="/testStudentList/edit" />
            <crud-table-btn-del style="color: #F56C6C;" url="/testStudentList/delete" />
          </template>
        </crud-table-handler>
      </crud-table-data>
    </crud-table-pagination>

    <crud-table-dialog :formProps="{ labelPosition: 'right' }" width="50%">
      <template #formDialog>
        <el-form-item label="姓名" prop="name">
          <el-input clearable placeholder="姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input clearable placeholder="年龄" />
        </el-form-item>
      </template>
    </crud-table-dialog>
  </crud-table-v2>
</template>

组件参考

1、CrudTable 【required】

描述：顶层容器

Attributes

参数	说明	类型	默认值
url	数据列表接口地址	string	required
params	在请求 table 数据时，总是会携带的参数	object	{}

Methods

方法	说明	参数
getTableData	刷新表格数据，resetPageNo：是否重置页码为第一页，params：请求的额外参数	Function(resetPageNo: boolean, params: object)

Events

方法	说明	回调
loaded	组件数据加载完成	{data: array, requestParams: object}

2、CrudTableData 【required】

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

参数	说明	类型	默认值
autoLoad	在组件挂载时自动加载数据	boolean	true
...rest	支持 el-table 的其他属性，或者方法

3、CrudTableColumn

描述：动态表格列
根据配置项循环渲染 el-table-column 。支持多级表头，配置项里面提供 `children` 字段即可嵌套表头

参数	说明	类型	默认值
columns	el-table-column 属性数组，可提供 children 字段实现表头嵌套	array	required

示例

columns: [
  {
    label: 'id',
    prop: 'id',
  },
  {
    label: 'info1',
    prop: 'info1',
    children: [
      {
        label: '学号',
        prop: 'stu_num',
      },
      {
        label: '姓名',
        prop: 'name',
      },
    ],
  },
]

4、CrudTablePagination

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

参数	说明	类型	默认值
pageSize	每页数据大小	number	15
...rest	支持 el-pagination 的其他属性

5、CrudTableHeader

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

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

6、CrudTableSearch

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

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

7、CrudTableDialog

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

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

Attributes

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

Events

事件名称	说明	回调参数
dialogChange	弹窗状态改变触发，打开与关闭	{ open: boolean, type: string }
successed	内部表单提交成功触发	{ res: object, type: string }

8、CrudTableAction

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

9、CrudTableHandler

描述：行操作按钮容器，语义化、实际渲染的是一个 el-table-column
使用`hander`具名插槽可以拿到行数据`{ row, column, $index }`

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

10、CrudTableBtnAdd

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

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

注意协商后端接口：

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

11、CrudTableBtnEdit

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

参数	说明	类型	默认值
isQuery	在提供 echoUrl 时是否转换为？id= 的形式	boolean	false
dialogTitle	打开弹窗时的弹窗标题	string	编辑
url	提交编辑请求的 api 路径	string	required
reqEntity	提交网络请求的对象	object
echoUrl	回显 api 路径；可选，在打开编辑的时候，默认是从表格行中获取数据，若设置了此字段，则从此接口获取数据	string
...rest	支持 el-button 的其他所有属性

注意协商后端接口：

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

12、CrudTableBtnDel

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

参数	说明	类型	默认值
url	提交删除请求的 api 路径	string	required
reqEntity	提交网络请求的对象	object
isQuery	在提交时是否转换为？id= 的形式	boolean	false
...rest	支持 el-button 的其他所有属性

注意协商后端接口：

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

13、CrudTableBtnPreview

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

参数	说明	类型	默认值
isQuery	在提供 echoUrl 时是否转换为？id= 的形式	boolean	false
dialogTitle	打开弹窗时的弹窗标题	string	查看
echoUrl	回显 api 路径；可选，在打开预览的时候，默认是从表格行中获取数据，若设置了此字段，则从此接口获取数据	string
...rest	支持 el-button 的其他所有属性

注意协商后端接口：

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

el-crud-table-v2

el-crud-table-v2

特性介绍

使用

安装与引入

安装

全部引入

按需引入

完整组件列表

全局配置

基本使用

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

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

3、添加头部与搜索栏

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

组件参考

1、CrudTable 【required】

Attributes

Methods

Events

2、CrudTableData 【required】

3、CrudTableColumn

4、CrudTablePagination

5、CrudTableHeader

6、CrudTableSearch

7、CrudTableDialog

Attributes

Events

8、CrudTableAction

9、CrudTableHandler

10、CrudTableBtnAdd

11、CrudTableBtnEdit

12、CrudTableBtnDel

13、CrudTableBtnPreview

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

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

Weekly Downloads