el-crud-table-v2

v1.1.8

Published

2 years ago

el-crud-table-vue2 version

Downloads

0High
0Medium
0Low

itsmile

crud table vue element-ui

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'

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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

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