@scenetechnology/cj_iview_table

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"
/>

属性配置

基础属性

列配置项

每个column支持以下属性：

事件

插槽

高级特性

1. 筛选功能

组件支持多种筛选类型：

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

2. 列设置

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

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

3. 数据请求

支持两种数据加载方式：

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

4. 跨分页保留选中

当表格包含 type: 'selection' 列时，可通过 reserveSelection 开启跨分页、跨搜索/筛选保留勾选。

<cj_iview_table
  :columns="columns"
  :request="loadData"
  row-key="id"
  :reserveSelection="true"
  @on-reserve-selection-change="handleSelectionChange"
/>

说明：

• rowKey 必须能唯一标识一行数据，支持多级路径，例如 user.id
• on-selection-change 返回的是当前页选中项
• on-reserve-selection-change 返回的是所有分页/筛选范围内累计保留的选中项

5. 跨页面返回后恢复勾选

如果你会在离开列表页后再回来，需要由父页面自己保存已选 rowKey 列表，并在重新进入时通过 selectedRowKeys 传回组件。

<cj_iview_table
  :columns="columns"
  :request="loadData"
  row-key="id"
  :reserveSelection="true"
  :selectedRowKeys="savedSelectedRowKeys"
  :selectedRows="savedSelectedRows"
  @on-reserve-selection-change="handleReserveSelectionChange"
  @on-reserve-selection-keys-change="handleReserveSelectionKeysChange"
/>

export default {
  data () {
    return {
      savedSelectedRowKeys: JSON.parse(sessionStorage.getItem('table-selected-row-keys') || '[]'),
      savedSelectedRows: JSON.parse(sessionStorage.getItem('table-selected-rows') || '[]')
    }
  },
  methods: {
    handleReserveSelectionChange (selectedRows) {
      this.savedSelectedRows = selectedRows
      sessionStorage.setItem('table-selected-rows', JSON.stringify(selectedRows))
    },
    handleReserveSelectionKeysChange (selectedRowKeys) {
      this.savedSelectedRowKeys = selectedRowKeys
      sessionStorage.setItem('table-selected-row-keys', JSON.stringify(selectedRowKeys))
    }
  }
}

说明：

• selectedRowKeys 传的是 rowKey 数组，不是整行数据
• selectedRows 传的是之前保存下来的完整行数据，组件会优先用它恢复完整提交数据
• 组件会在数据重新加载后自动按这些 key 回显勾选
• 如果某些 key 在当前数据集中不存在，会被自动忽略
• 如果你希望“进入页面不翻页也能直接提交全部已选数据”，需要同时传 selectedRowKeys 和 selectedRows

使用示例

<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值