云枢 Nexus UI

# 快速开始

本指南将帮助你在云枢 8.1 及以上版本的项目中集成 Nexus UI 组件库。

# 环境要求

依赖 版本 说明
Vue ^2.7.16 基础框架
@h3/antd-vue 1.6.3 云枢定制版 Ant Design
moment ^2.26.0 日期处理
axios >=0.21.0 HTTP 请求（API 类组件需要）
lodash-es ^4.17.21 工具函数

# 安装

pnpm add @h3/cloudpivot-nexus-ui
1

@h3/cloudpivot-nexus-ui@2.0.0-beta.41 安装包下载约 373 KB，解压后约 1.5 MB。完整引入时，脚本 index.esm.js 约 329 KB（gzip 约 92 KB），样式 index.esm.css 约 70 KB。Vue、@h3/antd-vue、VTable 等依赖不打进包内，不计入上述体积。

# 引入组件库

# 完整引入

import Vue from 'vue'
import Antd from '@h3/antd-vue'
import NexusUI from '@h3/cloudpivot-nexus-ui'

import '@h3/antd-vue/dist/antd.css'
import '@h3/cloudpivot-nexus-ui/dist/index.esm.css'

Vue.use(Antd)
Vue.use(NexusUI)
1
2
3
4
5
6
7
8
9

# 按需引入

import { CloudTable, serializeColumn, filterColumnByPermiss } from '@h3/cloudpivot-nexus-ui'
import '@h3/cloudpivot-nexus-ui/dist/index.esm.css'

export default {
  components: { CloudTable }
}
1
2
3
4
5
6

# 在云枢子表中使用 CloudTable

这是最典型的使用场景——在云枢表单的子表区域使用 CloudTable：

<template>
  <cloud-table
    :records="data"
    :columns="columns"
    :options="tableOptions"
    :loading="loading"
    @change="onChangeValue"
  />
</template>

<script>
import { CloudTable, serializeColumn, filterColumnByPermiss } from '@h3/cloudpivot-nexus-ui'

export default {
  components: { CloudTable },
  data() {
    return {
      loading: false,
      data: [],
      columns: [],
      tableOptions: {
        mode: 'edit',
        showTotal: false,
        showPageNation: false,
        defaultPageSize: 10,
        enableRowDrag: true,
      }
    }
  },
  created() {
    this.initColumns()
  },
  methods: {
    initColumns() {
      const filtered = filterColumnByPermiss(rawColumns, this.permiss)
      this.columns = serializeColumn(
        filtered, parentKey, sheetCode,
        schemaCode, this.tableOptions
      )
    },
    onChangeValue(records, deletedRecords) {
      this.data = records
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# 样式说明

重要

必须同时引入 @h3/antd-vue 和组件库的样式文件，否则组件外观将不完整：

import '@h3/antd-vue/dist/antd.css'
import '@h3/cloudpivot-nexus-ui/dist/index.esm.css'
1
2

# 常见问题

# 组件样式不生效？

确保已引入两个 CSS 文件。组件基于 @h3/antd-vue 封装，依赖 antd 的基础样式。

# StaffSelect / RelevanceSelect 无法使用？

这两个组件依赖云枢后端 API 接口，需要在有效的云枢运行环境中使用，不支持独立于云枢平台运行。

# CloudTable 单元格编辑器不显示？

确保通过 serializeColumn 正确序列化了列配置，编辑器类型会自动根据字段类型匹配。

# 下一步

← CloudTable 表格 →