zr-ant-ng
v1.0.1-alpha.0
Published
ant的二次封装
Downloads
1
Readme
table 表格
用法
html:
<zr-ant-table [tableData]="tableData"></zr-ant-table>新增方法
| 方法名 | 作用 | 日期 | | :--------- | -----------------------: | -------: | | (loadData) | 得到初始化数据格式去渲染 | 2020.8.7 | | (trigger) | 按钮触发 | 2020.8.7 |
其他的方法跟 ant 保持一致
非 ant 官方添加的属性
| 设置位置 | 属性 | 作用 | 备注 | 日期 | | :---------------- | ---------------: | ------------------: | -----------------------------------------------: | --------: | | tableData.options | selection="prop" | 设置 table 的复选框 | 其中 prop 为 data 中的 key 值且值为 boolean 类型 | 2020.8.10 |
js:
// 注： ant的table方法都可以使用
public tableData = {
// th的信息
fields: [
{
// th显示出来的字段
label: '车辆信息',
// 传给后台的字段
prop: 'carInfo',
},
{
label: '金额',
prop: 'money',
},
],
// 渲染的数据
data: [
{
// 对应field中的prop值
checked: true,
carInfo: '大众',
money: '123万',
},
{ checked: false,carInfo: '本田', money: '233万' },
{ checked: true,carInfo: '大众', money: '323万' },
],
// 分页信息
pagination: {
nzPageIndex: 1,
nzPageSize: 10,
nzTotal: 30,
},
// ant table上的所有属性绑定
options: {
selection: 'checked'
},
button: [{
label: "查询",
value: "",
class: "",
options:{}
}]
}tableData 属性介绍
| 属性 | 作用 | 备注 | 日期 | | :--------- | -------------------------------: | -------------------------------------------------------------------------------: | --------: | | fields | 设置 th 的显示值以及传给后台的值 | fields 中的 label 为显示值,prop 为传给后台的值 | 2020.8.10 | | data | 设置 td 的显示值 | data 中的 key 对应 fields 中的 prop 值 | 2020.8.10 | | pagination | 分页属性设置 | 与 ant 保持一致 | 2020.8.10 | | options | 属性设置 | 与 ant 保持一致 | 2020.8.10 | | button | 按钮设置 | label 为显示值,value 为判断值,class 设置 button 的 class,options 与 ant 保持一致 | 2020.8.10 |
表单
html:
<zr-ant-form [formData]="formData"></zr-ant-form>新增方法
| 方法名 | 作用 | 日期 | | :----- | ---: | ---: | | 无 | 无 | 无 |
其他的方法跟 ant 保持一致
public formData = {
// fields表示渲染哪些组件，对组件的属性设置等
fields: [
{
// 显示的label
label: '姓名',
// 传给后台的值
prop: 'userName',
// 输入框类型
type: 'input',
// 校验正则
rules: '',
// 对于控件输入框的设置
formControlOption: {
nzErrorTip: 'The input is not valid E-mail!',
},
// 对于label的设置
formLabelOption: {
nzRequired: true,
nzNoColon: false,
}
},
{
label: '性别',
prop: 'sex',
// 下拉框
type: 'select',
rules: '',
formControlOption: {},
formLabelOption: {
nzRequired: true,
nzNoColon: false,
},
// 下拉值
data: [
{
value: 'male',
label: '男',
},
{
value: 'female',
label: '女',
},
],
fields: {
label: 'label',
value: 'value',
},
},
{
label: '日期选择器',
prop: 'date',
type: 'date',
rules: '',
// 日期类型
dateType: 'rangePicker',
formControlOption: {
nzFormat: 'yyyy',
},
formLabelOption: {
nzRequired: true,
nzNoColon: false,
},
},
{
// 单选框
label: '喜爱的明星',
prop: 'radio',
type: 'radio',
rules: '',
formControlOption: {},
formLabelOption: {
nzNoColon: false,
},
data: [
{
label: '周杰伦',
code: '100',
},
{
label: '林俊杰',
code: '101',
},
{
label: '王嘉尔',
code: '102',
},
],
fields: {
label: 'label',
value: 'code',
},
},
{
// 下拉树
label: '农机品目',
prop: 'radio',
type: 'treeSelect',
rules: '',
formControlOption: {
nzPlaceHolder: '请选择树',
style: 'width: 200px;',
},
formLabelOption: {
nzRequired: true,
nzNoColon: false,
},
data: [],
},
{
label: '自动完成',
prop: 'autoValue',
type: 'autoInput',
rules: '',
formControlOption: {},
formLabelOption: {},
data: [],
fields: {
label: 'label',
value: 'code',
disabled: 'isDisabled',
},
},
{
label: '省市区',
prop: 'dist',
type: 'cascader',
rules: '',
formControlOption: {},
formLabelOption: {},
data: [],
fields: {},
},
],
// form设置
option: {
nzLayout: 'inline',
},
// 设置初始值
validateForm: {},
}
init(){
this.formData.validateForm = this.fb.group({
userName: [null, [Validators.required]],
sex: [null, [Validators.required]],
date: [null],
radio: [null, [Validators.required]],
autoValue: [null],
dist: [null],
});
}查询
html
<zr-ant-query [queryData]="queryData"></zr-ant-query>新增方法
| 方法名 | 作用 | 日期 | | :--------- | -----------------------: | -------: | | (loadData) | 点击按钮时触发的数据返回 | 2020.8.7 |
其他的方法跟 ant 保持一致
js
// formData跟表单用法一摸一样
public queryData = {
formData:{
field: [{
// 显示的label
label: '姓名',
// 传给后台的值
prop: 'userName',
// 类型
type: 'input',
// 校验正则
rules: '',
// 对于控件输入框的设置
formControlOption: {
nzErrorTip: 'The input is not valid E-mail!',
},
// 对于label的设置
formLabelOption: {
nzRequired: true,
nzNoColon: false,
}
},
{
label: '性别',
prop: 'sex',
type: 'select',
rules: '',
formControlOption: {},
formLabelOption: {
nzRequired: true,
nzNoColon: false,
},
// 下拉值
data: [
{
value: 'male',
label: '男',
},
{
value: 'female',
label: '女',
},
],
fields: {
label: 'label',
value: 'value',
},
},
]
},
button: [{
// 显示字段
label: '查询',
// 自己设置 自己用来判断的
value: 'search',
// 设置class
class: '',
// ant button的所有设置
options: {
nzType: 'primary',
},
}]
}版本更新
版本号从 1.2.3 变成 1.2.4-0，就是 1.2.4 版本的第一个预发布版本。
npm version prepatch
版本号从 1.2.4-0 变成 1.3.0-0，就是 1.3.0 版本的第一个预发布版本。
npm version preminor
版本号从 1.2.3 变成 2.0.0-0，就是 2.0.0 版本的第一个预发布版本。
npm version premajor
版本号从 2.0.0-0 变成 2.0.0-1，就是使预发布版本号加一。
npm version prerelease
版本发布
打包
npm run packagr
cd dist
npm pack
登录 npm
npm login
发布 npm
npm publish
一些问题阐述
- 无