1、a-select 获取选项文本并设置默认
设置labelInValue属性,获取到的value会成为{key:string, label:string};
<a-select labelInValue placeholder="选择区间" v-decorator="['numberSelect', { initialValue: { key: '0', label: '大于等于' } rules: [{ required: false }]}]">
<a-select-option value="0">大于等于</a-select-option>
<a-select-option value="1">大于</a-select-option>
<a-select-option value="2">小于等于</a-select-option>
<a-select-option value="3">小于</a-select-option>
</a-select>
2、日期组件汉化
<template>
<a-locale-provider :locale="zh_CN">
<div id="app">
<router-view/>
</div>
</a-locale-provider>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
export default {
data () {
return {
zh_CN
}
}
}
</script>
3、table rowKey设置
<a-table :columns="columns" :dataSource="data" bordered :pagination="pagination" @change="onChange" :loading="loading" :rowKey="record => record.report_id">
</a-table>
4、时间组件(回显问题)
<a-form-item label="时间范围">
<a-range-picker size="small" format="YYYY-MM-DD" v-decorator="['search_param', { initialValue:
search_param, rules: [{ type: 'array', required: true, message: '请选择时间!' }]}]"/>
</a-form-item>
这玩意儿真是,按官网介绍一个moment应该是可以设置默认值的,然鹅我用了ts,引入之后一直提示我moment.d.ts文件有问题,wtf,一顿操作之后放弃;换一个方法回显。
(this as any).dataForm.validateFields((err: any, values: any) => {
if (!err) {
const rangeValue:any = values['search_param']
search_param: rangeValue[0].format('YYYY-MM-DD') + ',' + rangeValue[1].format('YYYY-MM-DD')
}
})
5、table组件pc端自适应问题,当宽度变小出现滚动条
设置scroll属性 设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 x
设置一个数字,如果要设置为 true
,需要配合样式 .ant-table td { white-space: nowrap; }
6、左侧menu自适应且点击可隐藏
<a-layout-sider :trigger="null" collapsible :collapsed="collapsed" style="background: #fff"
breakpoint="lg"
collapsedWidth="80"
@breakpoint="onBreakpoint"
>
</a-layout-sider>
将文档中的 v-model="collapsed" 改成 :collapsed="collapsed",其次通过@breakpoint方法绑定自适应改变方法传递值给父组件
7、ant design of vue 中moment对typescript支持情况
因我使用的是ts,在使用时node_modules中的moment支持ts文件会报错(说没有export Moment模块),然后我改成下方代码,死马当活马医吧,先让他不报错再说。。。
import Moment from 'moment';
interface Moment{}
8、今天发现ant design一个很傻屌的地方,我们需求是有个滚动,然后我取巧使用了跑马灯(carousel)组件,然后需要调整一下自动切换时间,查看api没有。。。我勒个槽,然后绝望准备换一个方法实现时,发现下方有一行小字,更多参数可参考:vc-slick props 找到了autoplaySpeed。。然后设置时间。ok