Ssi-table NPM | npm.io

快速上手

这是一个简单的带搜索条件和分页的表格组件

渲染效果 RUNOOB 图标

安装

建议 node >= 16.20.2
vue3.0+
element plus

npm install ssi-table

使用示例

// 引入自定义组件
import SsiTable from 'ssi-table'
// 引入组件样式
import 'ssi-table/style.css'

app.use(SsiTable)

<template>
  <SsiTable
    ref="tableRef"
    :search-list="searchList"
    :table-header="tableHeader"
    @search-data="searchData"
  >
    <el-button type="primary">新增</el-button>
  </SsiTable>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const tableRef = ref()

const searchList = reactive([
  {
    label: '姓名',
    prop: 'name',
    type: 'Input',
    model: ''
  },
  {
    label: '年龄',
    prop: 'age',
    type: 'Select',
    model: '',
    option: [
      { value: 888, label: '测试01' },
      { value: 555, label: '测试02' }
    ],
    ItemAttrs: {
      clearable: true
      // 支持Element Select 此组件所有原生属性
    }
  }
])

// 表头配置项
let tableHeader = reactive([
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄',
    ItemColumn: {
      width: '120'
      // 支持Element FormItem 此组件所有原生属性
    }
  },
  {
    prop: '#',
    label: '操作',
    defineCustom: <T>(row: T) => {
      return [
        {label: '详情', option: { type: 'danger' }, click: () => {}}
      ]
    }
  }
])

const searchData = (data: any) => {
  // 执行查询，data 为查询条件

  /**
   * 请求数据之后
  */
  // 渲染数据，传入数据和总数
  tableRef.value.setData([], 100)
}
</script>

<style lang="scss" scoped></style>

搜索配置

searchList：接收一个数组，接口为下面所示

/**
 * @label 展示的名称
 * @prop 绑定的属性
 * @type 组件类型 输入框，下拉框，日期选择器，树形选择器，单选框，树形下拉框，数字输入框，范围输入框
 * @model 默认值，不传时为 ""
 * @span 单个组件占比（优先级最高）
 * @option 组件为选择框时的下拉列表
 * @isShow 是否显示该组件
 * @ItemAttrs 该组件的其它属性
 * @ItemColumn FormItem的所有属性
*/
export interface formType {
  label: string;
  prop: string;
  type: 'Input' | 'Select' | 'DatePicker' | 'Cascader' | 'Radio' | 'TreeSelect' | 'InputNumber' | 'InputRange';
  model?: string | number | boolean | string[] | number[];
  option?: any[];
  span?: number;
  isShow?: <T>(data: T) => boolean;
  ItemAttrs?: any;
  ItemColumn?: any;
}

searchOption：搜索条件额外配置，接收一个对象，接口为下面所示

/**
 * @immediately 初始化是否立刻执行查询
 * @span 单个组件占一行的比例
*/
export interface optionType {
  immediately?: boolean
  span?: number
}

表头配置

tableHeader：接收一个数组，接口为下面所示

/**
 * @label 表头名称
 * @prop 表头绑定字段
 * @ItemColumn 表头其他属性，支持Element该组件所有属性
 * @defineCustom 自定义表格内容，接收 h 函数，或自定格式数组
*/
export interface tableHeaderType {
  label: string;
  prop: string;
  ItemColumn?: any;
  defineCustom?: ((type: string | Component, children?: Children | Slot) => VNode) | (<T>(data: T) => customArr[])
}

searchOption：表格额外配置，接收一个对象，接口为下面所示

/**
 * @tableHeight 表格高度，默认父容器 100%
 * @isSelection 是否显示多选框，默认 false
 * @selectionOption 多选多额外属性，支持Element该组件所有属性
 * @isIndex 是否显示序号，默认 true
 * @tableAttr 绑定在 table 上的属性，支持Element该组件所有属性
 * @tableEvent 绑定在 table 上的事件，支持Element该组件所有事件
*/
export interface tableOptionType {
  tableHeight?: number;
  isSelection?: boolean;
  isIndex?: boolean;
  selectionOption?: {
    'row-key': any,
    [x: string]: any
  };
  tableAttr?: any;
  tableEvent?: any
}

分页配置

paginationOption：接收一个数组，接口为下面所示

/**
 * @isPagination 是否显示分页
 * @limit 一页几条
 * @pageSizes 快捷切换一页几条
 * @layout 分页布局结构
*/
export interface paginationType {
  isPagination?: boolean;
  limit?: number;
  pageSizes?: number[];
  layout?: string
}

插槽

默认情况组件标签中间的内容全部插入到表格的正上方，请参考上方示例图片中的新增

1 year ago

1 year ago

1 year ago