chem-grid
features
- Generate table by Schema
- Use slot customize table column
- Column permissions
- Rich interactive operation
install
npm install chem-grid --save
how use
import chemGrid from 'chem-grid';
import Axios from './axios';
Vue.use(chemGrid, {
tagName: 'chemGrid',
httpInstance: Axios,
sortProperty: 'query_order_by'
});
install config
{
// 组件名字
tagName: "chem-grid", // default
// ...
httpInstance: null,
// 请求中排序字段
sortProperty: "query_order_by", // default
// 接口返回Schema
resSchema: {
list: 'customPageList', // 接口用于显示数据的字段
total: 'customTotal', // 接口用于显示合计信息字段
page: 'page', // 接口用于显示分页信息的字段
count: 'totalItem' // 分页信息中总计多少条的字段
},
// 存储localStorage中表格的前缀 - 防止命名冲突
salt: 'chem_grid'
}
props
Prop |
描述 |
值 |
config |
schema 配置 |
下面有 config 详细介绍 |
params |
请求参数 |
{} |
auth |
权限信息 |
{ columns: [], buttons; [] } |
totalInfo |
自定义统计信息 |
{} |
event
Name |
描述 |
参数 |
row-select |
row 被双击或者回车 |
rowData |
methods
Name |
描述 |
参数 |
refresh |
刷新表格数据 |
isReset:boolean - 是否重置分页和选择项 |
setData |
设置表格数据 |
source:Record<string, any>[] |
getData |
获取表格数据 |
|
config
Name |
描述 |
值 |
id |
【必填】表格唯一标识,主要用户存储在 localStorage 表格的名字 |
null |
rowKey |
行的唯一标识 |
id |
hasPage |
是否显示分页 |
true |
isInitialData |
初始化时是否自动加载表格数据 |
true |
sortable |
是否开启排序功能 |
true |
multiple |
是否开启 checkbox 选择 |
false |
showIndex |
是否显示行序号 |
true |
url |
表格数据源 - 详情看下面介绍 |
null |
pipe |
接口请求成功后对数据进行再处理 |
Function(data) |
sortConfig |
排序功能传递的参数 |
['desc', 'asc', null] |
pageCount |
分页器显示按钮的个数 |
7 |
items |
【必填】每个列的配置 |
null |
items
Name |
描述 |
值 |
column |
列对应的后端字段 |
string |
label |
列显示的名字 |
string |
width |
列的默认宽度 |
200 |
sortable |
列是否能排序 |
true |
slot |
列自定义显示 - 使用作用域插槽,值为 model 和$index |
string |
formatter |
列的值格式化 |
Function(value,rowData) |
pin |
列的固定 |
left, right, null |
hide |
列的隐藏 |
false |
buttons |
最后一列显示的按钮配置 |
null |
buttons
Name |
描述 |
值 |
label |
按钮文字 |
string |
auth |
按钮权限字段 |
string |
show |
按钮是否显示 |
boolean |
click |
按钮点击函数 |
Function(rowData, index) |
url 介绍
chem-grid 默认要求使用 axios 来请求数据,在进行组件全局安装时需要将 axios 封装后的实例配置上去
import axiosInstance from './http';
Vue.use({
httpInstance: axiosInstance
});
如何才能配置 url 让表格获取值? 参照现在常用的 http 管理方式,这里提供了三种场景,尽量满足大家使用
- axios 简单封装 - (基础路径、拦截器等...)
- 自己封装的函数进行请求
- 对接口统一 Schema 配置,对 axios 实现 get,post 等请求封装
1. axios 的简单封装
// 1. 定义axios实例
import axios from 'axios';
const instance = axios.create({
baseURL: BASE_URL,
timeout: 20000,
withCredentials: true
});
instance.interceptors.request.use(config => {
// ... 请求拦截
});
instance.interceptors.response.use(response => {
// ... 响应拦截
});
// 2. 在url中使用
const tableConfig = {
url: '/getUserList'
// ...
};
2. 自己封装函数
该方式不必在全局安装时配置 httpInstance 选项
import axios from './axiosInstance';
// 1. 自定义请求函数
const getUserList = params => {
return axios.get('/getUserList', params);
};
// 2. 使用
import { getUserList } from '@/http/UserApi';
const tableConfig = {
url: getUserList
};
3. 对接口统一 Schema 配置,对 axios 实现 get,post 等请求封装 - 推荐
该方式能更好的管理后端接口,并通过接口 schema 配置来实现更多的功能, 如接口白名单、黑名单等自定义操作
// 1. 接口统一管理 - user.js
export default {
getUserList: {
url: '/getUserList',
type: 'get',
title: '获取用户列表'
// ... other set
}
// .. other api
};
// 2. axios根据配置 - axiosInstance.js
const http = (name, data) => {
const targetApi = userConfig[name];
const params = {
url: targetApi.url,
method: targetApi.type
};
if (targetApi.type === 'get') {
params['params'] = data;
}
if (targetApi.type === 'post') {
params['data'] = data;
}
return instance(params);
};
// 3. 使用
const tableConfig = {
url: 'getUserList'
};
修改主题色
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-mixin';
$THEME_COLOR: red; // 定义颜色
.ag-theme-balham {
@include ag-theme-balham(
(
selected-row-background-color: rgba($THEME_COLOR, 0.25),
range-selection-background-color: rgba($THEME_COLOR, 0.2),
range-selection-highlight-color: rgba($THEME_COLOR, 0.35),
range-selection-border-color: $THEME_COLOR
)
);
.chem-grid_handleButtons,
.chem-grid_base-checkbox,
.chem-grid_pagination {
color: ag-param(range-selection-border-color);
}
}