hnsdtable v0.0.4

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

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

options 兼容支持 vxe-grid 配置

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

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

支持基于 Vue 2.x 的前端项目，如有使用疑问，请发邮件：gaozhan@tiamaes.com

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

内置 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 基于 vxe-table@3.x 版本 vxe-grid 封装，100% 兼容支持所有 vxe-grid api

API 属性文档

props

options 新增属性

Methods

Slots

详见 vxe-grid Slots

Events

详见 vxe-grid Events

样例代码

详见 examples 目录

查看样例

npm run serve