ant design of vue 使用记录

原创
2019/02/25 19:03
阅读数 7.5K

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

 

 

 

 

 

 

 

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部