Ant Design Vue使用记录,持续记录
- Vue学习
- 2022-05-06
- 1331热度
- 0评论
好些问题,每次解决了,下次遇到了又要重新翻文档,干脆就自己记录一下。
Ant Design Vue 1.x
1.Form组件(2.x之后用法不同)
- Form.create(options) | this.$form.createForm(this, options) ,通过JFX方式去定义一个Form组件的各种属性。经 Form.create() 包装过的组件会自带 this.form 属性,如果使用 template 语法,可以使用 this.$form.createForm(this, options);
- Form对象-----Form.Item对象 ------ decorator相关对象(参数为输入组件绑定的属性,相关数据选项),相关选项解释:https://antdv.com/components/form-cn/#API
- 通过Form.create()创建的Form对象,绑定在a-form组件上,然后就可以把整个表单当做一整个对象去处理,每个输入型组件都可以通过v-decorator自定义自己的行为(表单验证等)。
- 经过
getFieldDecorator
或v-decorator
包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管。 - 使用 Form.create 处理后的表单具有自动收集数据并校验的功能,但如果您不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用 Form.create 并自行处理数据。
- setFieldsValue设置表单默认值,必须在Form渲染之后进行,必须和参数对应,参数数量只能少或者相对相等,不能多。
2.使用过的组件
- 加载中(a-spin):https://antdv.com/components/spin-cn/
- 栅格系统(a-row、a-col):https://antdv.com/components/grid-cn/
- 表单(a-form、a-form-item):https://antdv.com/components/form-cn/
- 布局(a-layout...):https://antdv.com/components/layout-cn/
- 卡片(a-card):https://antdv.com/components/card-cn/
3.表格(a-table)
API详解:
- columns,指定一个对象用于配置表格列。
- dataSource,用于指定表格的数据源。
- loading,是否显示加载特效。
- rowKey,用于指定每个表格列的key值,可指定一个字符串或者一个参数为每行的数据对象的函数。
- pagination,绑定的分页组件,https://antdv.com/components/pagination-cn/
表格列描述对象(Column):
- dataIndex,对应数据对象中哪一个数据?(指定属性名),可以不指定该属性,使用插槽时slot-scope传递的是整个数据行对象。
{ title: 'Action', key: 'action', scopedSlots: { customRender: 'action' }, }
- key,绑定一个vue需要的key值。(数据对象内的属性名)
- customRender,绑定一个处理数据的自定义函数。
- title,显示的列标题文字。
- slots,使用 columns 时,可以通过该属性配置支持 slot 的属性,如 slots: { filterIcon: 'XXX'},代表这个在表格内可以使用插槽名为XXX的插槽来代替filterIcon属性(column支持的一个属性)的值。
- scopedSlots: { customRender: 'tags' }, 指定一个名为tags的插槽,用来展示当前列的值,slot-scope值为指定列的值和行值。和customRender只能生效一个。
- customRender,自定义该列的数据渲染,列的值为函数的返回值。和scopedSlots只能生效一个。
scopedSlots: { customRender: 'name' }, customRender:(text, record, index)=>{ return text; } //表格内插槽 <template slot="extra"> </template>
在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
3.select选择框
value传过去了但是显示的是value 而不是显示对应的选项,是因为传过去的值是number类型,而值是string类型,设置的value值跟选项的value值不相等,所以就找不到对应的选项值,转化为string类型就可以解决了。
4.upload
官方链接:https://1x.antdv.com/components/upload-cn/#components-upload-demo-default-files
受控的上传文件列表。可以自定义fileList的元素,upload的上传列表将对应的显示。使用 defaultFileList
设置已上传的内容。支持列表图片、照片墙、插槽等自定义上传的UI样式。
fileList: [
{
uid: '-1',
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
},
],
Ant Design Vue 2.x
1.Table组件常用属性
<a-table
:columns="columns"
@change="getTables"
:loading="loadingTable"
:data-source="data.data"
:pagination="data.paginate"
:bordered="false"
:scroll="{ y: height }"
:rowKey="key">
</a-table>
相关 属性
- columns,列的配置对象,https://2x.antdv.com/components/table-cn#API
loading
布尔值,是否显示表格的加载效果。- data-source,表格的数据源对象。
- pagination,表格的分页相关配置,https://2x.antdv.com/components/pagination-cn
- bordered,布尔值,是否显示表格竖向的边框。
- scroll,用于固定表头,以及行数据滚动。
- rowKey,每列的key值,作用同vue 的key。
- @change,分页、排序、筛选变化时触发的事件。
- size,表格的大小。
columns 配置对象
- align,设置内容的对齐方式,left、right、center
- ellipsis,超过宽度将自动省略,暂不支持和排序筛选一起使用。
- title,表格头的标题。
- dataIndex,对应数据对象内的键。
- width:,指定表格列的宽度,字符串类型。
- key ,Vue 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性。
- customRender,自定义渲染函数,Function({text, record, index});
- slots,指定某些列属性作为插槽来使用,例如指定customRender属性后,可直接使用插槽代替自定义输出; slots: {customRender: 'content'}
- sorter,指定一个自定义排序的函数,同Array的排序。
pagination分页
首先需要在表格组件上配置pagination属性,点击换页时会触发change事件,事件参数为改变后的pagination对象。
pagination: {
pageSize: 30,//每页条数
showSizeChanger: true,
current: 1,
total:0,
pageSizeOptions:["30","50","100"]
}, //分页器
配合Thinkphp分页时,传递size和page给后端,请求成功后更新总数量、当前页。
自定义列
通过回调函数输出值:
customRender:(moments)=>{
return '每月的'+moments+"号"
}
通过插槽自定义输出,下面是指定某个列属性通过插槽输出,指定customRender代表自定义列:
slots: {customRender: 'action'},
//表格插槽输出
<template #action>
</template>
2.栅格布局
没有匹配到设置的响应式参数时,会使用默认参数,例如没有设置xl的参数,xl大小的屏幕会使用默认值。
3.datepicker汉化无效
Antd-design-vue 2.x ,使用datepicker选择器在vite工具下,中文设置无效的解决办法(大概原因是中文语言包没有被正常引入,只能强行设置中文):
import moment from 'moment';
moment.locale('zh-cn',{
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
'_'
),
monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(
'_'
),
weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
longDateFormat: {
LT: 'HH:mm',
LTS: 'HH:mm:ss',
L: 'YYYY/MM/DD',
LL: 'YYYY年M月D日',
LLL: 'YYYY年M月D日Ah点mm分',
LLLL: 'YYYY年M月D日ddddAh点mm分',
l: 'YYYY/M/D',
ll: 'YYYY年M月D日',
lll: 'YYYY年M月D日 HH:mm',
llll: 'YYYY年M月D日dddd HH:mm',
}});
import moment from 'moment'
import 'moment/dist/locale/zh-cn'
moment.locale('en')
4.DatePicker 组件
绑定的是一个ref的响应式变量(moment()),返回的是一个普通的时间字符串;
let datetime = ref(moment());
/*计算当前的时间范围*/
let current = computed(() => {
let datetimes = moment(datetime.value);
if (type.value == 'day') {
return datetimes.format("MM月DD日") + "0点" + " 到 " + datetimes.format("MM月DD日") + "24点";
} else if (type.value == 'week') {
return datetimes.startOf('week').format("MM月DD日") + "0点" + " 到 " + datetimes.endOf('week').format("MM月DD日") + "24点";
} else if (type.value == 'month') {
return datetimes.startOf('month').format("MM月DD日") + "0点" + " 到 " + datetimes.endOf('month').format("MM月DD日") + "24点";
}
5.Form组件。绑定数据和表单验证
<a-form layout="vertical"
ref="formRef"
:model="formState"
:rules="rules">
<!--姓名-->
<a-form-item required>
<template #label>
<span style="margin-right: 3px">姓名</span>
<a-tooltip title="填写客户姓名" placement="right">
<QuestionCircleOutlined style="color: rgb(192, 196, 204); font-size: 13px;" />
</a-tooltip>
</template>
<a-input size="large" placeholder="姓名" allowClear>
<!-- 图标 -->
<template #prefix>
<UserOutlined style="color: rgb(192, 196, 204); font-size: 13px;" />
</template>
</a-input>
</a-form-item>
</a-form>
const formState = reactive({
name: '',
idCard:''
});
const rules = {
name: [
{
required: true,
message: 'Please input Activity name',
trigger: 'blur',
},
{
min: 3,
max: 5,
message: 'Length should be 3 to 5',
trigger: 'blur',
},
],
idCard: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
},
]
};
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
console.log('values', formState, toRaw(formState));
})
.catch(error => {
console.log('error', error);
});
};
6. 单独使用message和Modal组件时,需要单独引入css
import "ant-design-vue/es/message/style/css"
import "ant-design-vue/es/modal/style/css"
7.软件包动态引入
let icon=()=>import('@ant-design/icons-vue');
console.log(icon());
8.菜单
<a-menu>
<a-menu-item-group>
<a-menu-item>
<a-menu-divider>
问题总结
1.Form组件表单校验规则不生效
Form-Item组件的name属性必须和属性名一致,不填写name时不会进行校验
通过自定义验证方法,来验证form绑定的数据对象,内部对象的属性是否有效。
2.属性不生效
defaultExpandAllRows 仅用于首次渲染时生效(所有 default 开头属性均相同规范)。