@azglobal/components NPM

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