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 示例：

<az-table :rows="rows" :columns="columns" :scroll-height="169">
  <template v-slot:sex="{ row }">
    {{ row.sex === 1 ? '女' : '男' }}
  </template>
</az-table>

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 | 页码/每页条数改变时触发 | 当前页、每页条数