chem-grid

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

event

methods

config

items

buttons

url 介绍

chem-grid 默认要求使用 axios 来请求数据，在进行组件全局安装时需要将 axios 封装后的实例配置上去

import axiosInstance from './http';

Vue.use({
  httpInstance: axiosInstance
});

如何才能配置 url 让表格获取值？ 参照现在常用的 http 管理方式，这里提供了三种场景，尽量满足大家使用

1. axios 简单封装 - （基础路径、拦截器等...）
2. 自己封装的函数进行请求
3. 对接口统一 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);
  }
}