前端通用表格组件 sd-vxe-grid（vxe-table 已内置，项目无需安装）

支持快速配置，完成基本的增删改查表格

options 兼容支持 vxe-grid 配置

options 增加 operation 操作列配置，支持按钮下拉，通过配置 code 支持标准增删改查

options 增加 modalFormConfig 弹窗表单配置，规则和搜索表单 formConfig 保持一致

支持基于 Vue 2.x 的前端项目，如有使用疑问，请发邮件：[email protected]

内置组件和方法（项目可用）

内置 resize-detector 全局组件

<resize-detector @resize="resize"></resize-detector>

内置 vxe-tab 全局组件

<vxe-tab :options="options" />

内置 sd-vxe-modal 全局组件

<sd-vxe-modal ref="modal" />

内置 user-select 全局组件

<user-select v-model="data" :multiple="true" placeholder="请选择用户"></user-select>

内置 table-select 全局组件

<table-select v-model="data" :multiple="true" :options="[]" :columns="[]" placeholder="请选择"></table-select>

内置 Object.clone 全局方法

const cloneObj = Object.clone(obj);

内置 Object.merge 全局方法

const mergeObj = Object.merge({}, obj);

内置导出 VXETable，initData，refreshAllUsers，refreshGroupTree， throttle，debounce，xeUtils（详见 xe-utils）方法

import { VXETable, throttle, debounce, xeUtils, initData } from "@tiamaes/vxe-table";

内置已挂载实例（项目可用）

// vue 实例挂载 VXETable 内部对象
// Vue.prototype.$formats = VXETable.formats; // 移除挂载，如果需要请自行导入引用
Vue.prototype.$modal = VXETable.modal;
// Vue.prototype.$commands = VXETable.commands; // 移除挂载，如果需要请自行导入引用
// Vue.prototype.$render = VXETable.renderer; // 移除挂载，如果需要请自行导入引用
Vue.prototype.$xeUtils = xeUtils;

<sd-vxe-grid ref="table" :options="options" @onModalShow="onModalShow">
  <template #empty>空数据时显示的文本内容</template>
  <template #form>顶部搜索表单</template>
  <template #toolbar>工具栏模板</template>
  ...
</sd-vxe-grid>

安装

npm install @tiamaes/vxe-table

使用

import VXETable from "@hnsdtable/vxe-table";
import "@hnsdtable/vxe-table/index.css";
Vue.use(VXETable, {
  $i18n: i18n, // 如需多语言切换，依赖项目多语言实例
  request, // 在线配置，文件下载导出依赖项目请求实例
  // renderer: ["UserSelect"], // 开启内置用户选择器，已默认开启
  // 项目全局默认配置，可被页面内配置覆盖
  config: {
    // align: "center",
    // toolbarConfig: {
    //   zoom: true
    // }
  }
});

注意：如果项目使用 UserSelect，需要在使用用户选择器的顶级vue 页面，created 生命周期或 onRefreshData 方法内执行 initData方法

<script>
import { initData } from "@hnsdtable/vxe-table";
export default {
  methods: {
    onRefreshData() {
      initData();
    }
  },
  created() {
    initData();
  }
};
</script>

以上写法根据情况二选一，如果页面开启缓存，需要每次进入都更新用户选择器依赖数据，请使用 onRefreshData，反之created写法即可

注意：如果项目使用 TableSelect，需要在项目 main.js 增加如下代码，如不使用则无需添加

// @tiamaes/vxe-table 内置 TableSelect 依赖项目注册指令和全局组件
import Clickoutside from "element-ui/src/utils/clickoutside";
import ElSelectMenu from "element-ui/packages/select/src/select-dropdown";

Vue.directive("Clickoutside", Clickoutside);
Vue.component("ElSelectMenu", ElSelectMenu);

如果没有权限查看，请联系高瞻开启

vxe-table 文档

vxe-table 表格组件 vxe-grid 的 官方文档

hnsdtable/vxe-table 基于 [email protected] 版本 vxe-grid 封装，100% 兼容支持所有 vxe-grid api

API 属性文档

props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ---------------------------------------------- | :-------------: | ------------------ | :----: | | options | 表格配置，100% 兼容 vxe-grid 配置 （必填） | object | - | - | | maxHeight | 最大高度 （非必填） | number, string | - | auto | | skin | 表格主题皮肤 （非必填） | string | round normal | round | | settingsEnable | 是否开启在线配置 （非必填） | boolean, object | - | false | | leftBarEnable | 是否启用左侧自定义插槽 （非必填） | boolean | - | false |

options 新增属性

| 参数 | 说明 | 类型 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | :----: | | modalFormConfig | 新增，编辑，详情弹窗配置，规则和 formConfig 相同详见vxe-grid 使用方法 | object | | operation | 表格操作列按钮配置，详见Demo 使用方法 | object |

Methods

| 方法名 | 说明 | 请求参数 | | -------------------- | --------------------------------- | -------------------------------------------- | | getGrid | 获取 vxe-grid 实例 | - | | getModal | 获取 vxe-modal 实例 | - | | getModalForm | 获取 vxe-modal 内部 vxe-form 实例 | - | | getSearchForm | 获取 表格搜索 vxe-form 实例 | - | | getType | 获取当前弹窗模式，add/edit | - | | getSearchParams | 获取当前搜索表单数据 | - | | getCheckedRecords | 获取表格选中数据 | - | | setModalFormItemData | 设置单个弹窗表单项数据 | field, value | | setModalOptions | 设置弹窗 select 下拉数据 | field, options | | setSearchParams | 设置搜索表单项数据 | field, value | | setSearchOptions | 设置搜索 select 下拉数据 | field, options | | showModal | 自定义弹窗 | {params, component, title, modalType, width} | | refresh | 刷新表格数据，保留分页等参数 | - | | reload | 刷新表格数据，不保留任何参数 | - |

Slots

详见 vxe-grid Slots

Events

详见 vxe-grid Events

样例代码

详见 examples 目录

查看样例

npm run serve