@scenetechnology/cj_element_table NPM

cj_element_table

项目概述

cj_element_table 是一个基于 Vue3 和 element plus 的表格组件项目。该项目提供了增强的表格功能，简化了表格的使用和配置。

安装说明

环境要求

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

安装步骤

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

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

引入

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

import cj_element_table from '@scenetechnology/cj_element_table'
import '@scenetechnology/cj_element_table/dist/cj_element_table.css'
app.use(cj_element_table)

cj_element_table 组件使用文档

组件说明

cj_element_table 是一个基于 Element Plus 的表格组件封装，提供了丰富的表格功能，包括数据展示、搜索、排序、导入导出等功能。

属性配置

基础属性

属性名	说明	类型	默认值	是否必填
tableData	表格数据	Object	{rows: [],total: 0}	是
columns	表格列配置	Array	-	是
routerName	路由名称	String	-	是
exportUrl	导出表格数据接口	String	-	否
templateUrl	下载表格模板接口	String	-	否
inputUrl	导入表格数据接口	String	-	否
exportXlsxName	导出表格名称	String	路由名称	否
showSelection	是否显示表格多选框	Boolean	true	否
showIndex	是否显示表格序号	Boolean	true	否
showInputButtons	是否显示导入按钮	Boolean	true	否
showOutputButtons	是否显示导出按钮	Boolean	true	否
showInputButtons	是否显示列表设置按钮	Boolean	true	否
showViewSettingButtons	是否显示视图设置按钮	Boolean	true	否
maxHeight	表格最大高度	number/string	55vh	否
selecTableDisabledField	表格多选框禁用条件	Object	{key:'',value:''} 当表格row中的key字段等于value时禁用	否
initialQuery	初始化查询条件	Object	{page: 1,rows: 10,total: 0,}	否
pageSizes	分页大小选项	Array	10, 20, 30, 50	否
colsPerRow	每行的列数	Number	4	否
headerCellStyle	表头单元格样式	Object	{background:'#f5f7fa',color:'#606266',fontWeight:'bold'}	否

columns 配置项说明

字段名	说明	类型	是否必填	默认值	可选值
prop	字段名称	String	是	-	-
label	显示标签	String	是	-	-
search	是否可搜索	Boolean	否	false	true/false
searchKey	搜索使用字段默认使用prop字段搜索	String	否	prop字段	-
searchType	搜索类型	String	否	-	select/date
require	是否必填	Boolean	否	false	true/false
defaultValue	搜索框默认字段	any	否	-	-
options	选项数组（当 searchType 为 select 时使用）	Array	否	-	-

columns 字段详细说明

const columns = [
  {
    prop: 'name',
    require: true,
    label: '项目名称及规模',
    search: true
  },
  {
    prop: 'type',
    label: '项目类型',
    search: true,
    require: true,
    searchType: 'select',
    options: [
      { value: 1, label: '新建' },
      { value: 2, label: '改建' },
      { value: 3, label: '扩建' },
      { value: 4, label: '技改（技术改造）' },
      { value: 5, label: '引进（技术引进）' }
    ]
  },
  {
    prop: 'status',
    label: '项目状态',
    search: true,
    require: true,
    searchType: 'select',
    options: [
      { value: 1, label: '取消' },
      { value: 2, label: '设立' },
      { value: 3, label: '设计' },
      { value: 4, label: '建设中' },
      { value: 5, label: '试生产' },
      { value: 6, label: '竣工验收' }
    ]
  },
  {
    prop: 'save',
    label: '是否提交',
    require: true,
    options: [
      { value: 1, label: '待提交' },
      { value: 2, label: '已提交' }
    ]
  },
  {
    prop: 'report_date',
    label: '报告时间',
    search: true,
    searchType: 'date'
  }
]

事件

事件名	说明	回调参数
selection-change	当选择项发生变化时会触发该事件	selection: 已选择的行数据数组
search	当搜索条件发生变化时会触发该事件	query: 搜索条件对象

插槽

插槽名	说明
operation	表格顶部操作区域
columns	自定义列操作栏

使用示例

<template>
  <cj_element_table
    ref="tableRef"
    :exportUrl="exportUrl"
    :templateUrl="templateUrl"
    :inputUrl="inputUrl"
    :tableData="tableData"
    :columns="columns"
    @selection-change="handleSelectionChange"
    @search="handleSearch"
  >
    <template #operation>
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </template>
    <template #columns>
      <el-table-column label="操作" align="center" min-width="120">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </cj_element_table>
</template>