cj_iview_table

项目概述

cj_iview_table 是一个基于 Vue.js 和 ViewUI (原 iView) 的表格组件项目。该项目提供了增强的表格功能，简化了表格的使用和配置。

安装说明

环境要求

• Node.js (建议 v12 或更高版本)
• Yarn 包管理器

安装步骤

1. 克隆或下载项目代码
2. 在项目根目录运行以下命令安装依赖：

npm install @scenetechnology/cj_iview_table --legacy-peer-deps

引入

1. 在main.js中 引入UI库 引入UI样式

import cj_iview_table from '@scenetechnology/cj_iview_table'
import '@scenetechnology/cj_iview_table/dist/cj_iview_table.css'
Vue.use(cj_iview_table)

2.在页面使用

<cj_iview_table :border="true" ref="proTable" :tool-bar="toolBar" @onToolBar="onToolBar" :request="getTableData" :columns="columns" maxHeight='550' :filterLabelWidth="100" ></cj_iview_table>

Customize configuration

See Configuration Reference.

Pro Table 组件文档

组件介绍

cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、自定义列等高级特性。

基础用法

<cj_iview_table
  :columns="columns"
  :data="tableData"
  :loading="loading"
  :border="true"
/>

属性配置

基础属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | columns | Array | [] | 表格列配置项 | | data | Object | - | 表格数据源 | | loading | Boolean | false | 加载状态 | | border | Boolean | false | 是否显示边框 | | height | String | - | 表格高度 | | maxHeight | String | - | 最大高度 | | toolBar | Array/Boolean | true | 工具栏配置 | | defaultSize | Number | - | 默认分页大小 | | filterGridSpan | Number | 6 | 筛选栏栅格跨度 | | filterLabelWidth | Number | 80 | 筛选标签宽度 | | fields | Array | [] | 导出数据时需要包含的属性名 |

列配置项

每个column支持以下属性：

| 属性名 | 类型 | 说明 | |--------|------|------| | title | String | 列标题 | | key | String | 列数据字段 | | filter | Boolean | 是否可筛选 | | filterLable | String | 筛选项标签 | | valueType | String | 值类型(text/select/date/daterange/datetime/datetimerange/year) | | valueEnum | Array | 选择项数据(valueType为select时有效) | | hideInTable | Boolean | 是否在表格中隐藏 | | slot | Boolean | 是否使用自定义插槽 |

事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |

插槽

| 插槽名 | 说明 | |--------|------| | toolbar | 自定义工具栏 | | [column.key] | 自定义列内容渲染 |

高级特性

1. 筛选功能

组件支持多种筛选类型：

• 文本输入筛选
• 下拉选择筛选
• 日期选择筛选

2. 列设置

支持通过列设置功能动态控制表格显示列：

• 列显示/隐藏
• 列排序
• 列固定

3. 数据请求

支持两种数据加载方式：

• 通过data属性直接传入数据
• 通过request函数异步加载数据

使用示例

<template>
  <cj_iview_table
    :columns="columns"
    :request="loadData"
    :toolBar="toolBarConfig"
  >
    <template #toolbar>
      <Button type="primary">自定义按钮</Button>
    </template>
  </cj_iview_table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '名称',
          key: 'name',
          filter: true
        },
        {
          title: '状态',
          key: 'status',
          valueType: 'select',
          valueEnum: [
            { value: 1, label: '正常' },
            { value: 0, label: '禁用' }
          ]
        }
      ],
      toolBarConfig: [
        { text: '新增', type: 'primary' }
      ]
    }
  },
  methods: {
    async loadData(params) {
      // 实现数据加载逻辑
    }
  }
}
</script>

注意事项

1. 使用request函数加载数据时，返回的数据格式必须包含data和total字段
2. 列的key值必须唯一
3. 使用列设置功能时，必须给每列配置唯一的title值