# @azglobal/components > ``` npm install -S @azglobal/components ``` Latest version **1.0.7** (published 2022-03-15) · 0 weekly downloads ## Install ```sh npm install @azglobal/components pnpm add @azglobal/components yarn add @azglobal/components bun add @azglobal/components ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.7 | | Published | 2022-03-15 | | First published | 2022-03-09 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=12 | | Dependencies | 0 | | Unpacked size | 4.2 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | arthur's, luoxiaolie, yaoyongjia, minnie2020, azg2022 | ## Links - npm: https://www.npmjs.com/package/@azglobal/components - npm.io page: https://npm.io/package/@azglobal/components ## Recent versions - 1.0.7 (latest) — 2022-03-15 - 1.0.6 — 2022-03-14 - 1.0.5 — 2022-03-10 - 1.0.4 — 2022-03-09 - 1.0.3 — 2022-03-09 - 1.0.2 — 2022-03-09 - 1.0.1 — 2022-03-09 - 1.0.0 — 2022-03-09 ## README # Install ``` npm install -S @azglobal/components ``` # Quick Start ``` import Vue from 'vue' import AzglobalComponents from '@azglobal/components' Vue.use(AzglobalComponents) // or import { SearchForm } from '@azglobal/components' import '@azglobal/components/dist/bundle.css' Vue.use(SearchForm) ``` # Api ``` import { filterParams } from '@azglobal/components' filterParams： 过滤掉对象中value为空的元素； ``` # SearchForm Attributes 参数 | 说明 | 类型 | 可选值 | 默认值 --- | ---- | ----- | ------ | ------- inline | 行内表单模式 | boolean | - | true options | 参考下表 | array | - | [] show-export | 是否展示导出excel按钮 | boolean | - | false ## SearchForm options 参数 | 说明 | 类型 | 可选值 | 示例 --- | ---- | ----- | ------ | ------- type | 表单控件类型 | FormItemType | INPUT_TYPE, SELECT_TYPE, RADIO_TYPE等 | FormItemType.INPUT_TYPE label | 标签文本 | string | - | '姓名' prop | 表单域 model 字段，该属性是必填 | string | - | 'name' defaultValue | 控件默认内容 | string | - | '张三' options | 仅适用于下拉菜单、单选框控件选项数据 | array | - | 下拉菜单：[{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]
单选框：[{value: '选项1', label: '1'}, {value: '选项2', label: '2'}] ``` SearchForm options 示例： options: [ { label: '输入框', prop: 'name', defaultValue: '', type: FormItemType.INPUT_TYPE }, { label: '下拉菜单', prop: 'status', defaultValue: '', type: FormItemType.SELECT_TYPE, options: [ { value: '0', label: '全部' }, { value: '1', label: '待生效' }, { value: '2', label: '上架中' }, { value: '3', label: '下架中' }, { value: '4', label: '已结束' } ] }, { label: '单选框', prop: 'radio', defaultValue: '0', type: FormItemType.RADIO_TYPE, options: [ { value: '飞机', label: '0' }, { value: '大炮', label: '1' }, ] }, { label: '区间日期选择器', prop: 'date', defaultValue: [], type: FormItemType.DATERANGE_TYPE }, { label: '区间日期时间选择器', prop: 'datetime', defaultValue: [], type: FormItemType.DATETIMERANGE_TYPE } ] ``` ### FormItemType 参数 | 说明 --- | ---- INPUT_TYPE | 输入框 SELECT_TYPE | 下拉菜单 RADIO_TYPE | 单选框 DATERANGE_TYPE | 区间日期选择器 DATETIMERANGE_TYPE | 区间日期时间选择器 ## SearchForm Slot 参数 | 说明 --- | ---- \- | 自定义按钮 # AzTable Attributes 参数 | 说明 | 类型 | 可选值 | 默认值 --- | ---- | ----- | ------ | ------- rows | 显示的数据 | array | - | [] columns | 表格展示数据（表头） | array | - | [] scroll-height | Table 的高度 | number | - | 0 paginationData | 分页数据 | object | - | { totalCount: 2, pageNo: 1, pageSize: 20 } ## AzTable Events 参数 | 说明 | 参数 --- | ---- | ----- selection-change | 当选择项发生变化时会触发该事件 | selection ## AzTable columns 参数 | 说明 | 类型 | 可选值 | 默认值 --- | ---- | ----- | ------ | ------- prop | 显示的数据 | string | 'index', 'selection', 'expand' | - label | 表头标题 | array | - | [] align | 对齐方式 | string | 'left', 'center', 'right' | - width | 表格宽度 | number | - | - slot | 是否自定义表格 | boolean | - | false sortable | 对应列是否可以排序 | boolean | - | false sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | - | - sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | String/Array/Function(row, index) | - | - actions | 是否是操作列 | array | - | [] ``` slot为true时，插槽名字为prop的值 actions不为空时，为操作列 ``` ## AzTable columns actions 参数 | 说明 | 类型 | 可选值 | 默认值 --- | ---- | ----- | ------ | ------- title | 按钮标题 | string | - | - type | 按钮样式 | string | 参考el-link | 'default' callback | 点击事件回调 | function | - | - ``` callback(row, index) { console.log(row, index) } ``` AzTable 示例： ``` ``` ``` columns: [ { prop: 'selection', label: '全选', align: 'center', width: '56' }, { prop: 'index', label: '序号', align: 'center', width: '56' }, { prop: 'name', label: '正常列', align: 'center', }, { prop: 'sex', slot: true, label: '自定义列', align: 'center', }, { label: '操作', width: '200', align: 'center', actions: [ { title: '按钮1', callback: this.callback } ] } ], rows: [ { id: 1, name: '章三', sex: 1 }, { id: 2, name: '里斯', sex: 2 }, { id: 3, name: '里斯', sex: 2 }, { id: 4, name: '里斯', sex: 2 }, { id: 5, name: '里斯', sex: 2 }, ,{ id: 6, name: '里斯', sex: 2 }, { id: 7, name: '里斯', sex: 1 }, { id: 8, name: '里斯', sex: 2 }, { id: 9, name: '里斯', sex: 2 }, { id: 10, name: '里斯', sex: 1 }, { id: 11, name: '里斯', sex: 2 }, { id: 12, name: '里斯', sex: 1 } ] ``` # AzPagination Attributes 参数 | 说明 | 类型 | 可选值 | 默认值 --- | ---- | ----- | ------ | ------- total | 总条目数 | number | - | - page | 当前页数，支持 .sync 修饰符 | number | - | 1 limit | 每页显示条目个数，支持 .sync 修饰符 | number | - | 10 page-sizes | 每页显示个数选择器的选项设置 | number[] | - | [10, 20, 30, 50, 100] layout | 组件布局，子组件名用逗号分隔 | string | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' background | 是否为分页按钮添加背景色 | boolean | - | false auto-scroll | 切换分页后，是否回滚到表格顶部 | boolean | - | true hidden | 每页显示条目个数，支持 .sync 修饰符 | number | - | 10 one-page-not-show | 只有一页时是否隐藏 | boolean | - | - ## AzPagination Method 参数 | 说明 | 回调参数 --- | ---- | ----- pagination | 页码/每页条数改变时触发 | 当前页、每页条数 --- _Source: https://npm.io/package/@azglobal/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._