ant design vue 组件踩坑记录

1.tree-select & select 的placeholder设置无效

解决方案：placeholder的渲染与v-model的绑定值有关，tree-select将v-model绑定值改为null/undefined能够正常显示placeholder，select组件改为undefined。

2.ANT DESIGN+VUE中用选择框V-DECORATOR时同时传递VALUE和NAME的值

https://www.freesion.com/article/2582815275/

lable-in-value  :value="JSON.stringify(item)"

3.You cannot set a form field before rendering a field associated with the val ，ant 表单赋值问题

[vue] You cannot set a form field before rendering a field associated with the val ，ant 表单赋值问题 | 易学教程

setTimeout(()=>{
            this.props.form.setFieldsValue({
                'userName':value.name
            })
        },0)

增加一个时间循环，来将值插入表单中

4. 关于a-select label出现空格的问题

错误示例：

  {{ item.dataSourceName }}

正确示例：

{{ item.sourceFileName }}

解决vue select下拉框中的label传值有空格_本宝宝很开心的博客-CSDN博客

5.关于ant中table里的pagination修改

pagination: {
  total: 0,
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共${total}條`,
  onChange: (pageNumber, pageSize) => {
    this.pagination.current = pageNumber
    this.pagination.pageSize = pageSize
    this.initList()
  },
  buildOptionText:(size)=>{
    let text
    text=size.value+'條/頁'
    return text
  }
},

ant design vue Pagination 跳转 - itxst.com

也可以使用粗暴的原生js思想：修改antd Pagination分页翻译的默认文案 跳至_zPeng-的博客-CSDN博客_antd pagination 文字修改

6.定制主题变量

官方文档如下：（会报错）

在 vue cli 3 中定制主题 #

项目根目录下新建文件vue.config.js

// vue.config.js for [email protected]
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

正确写法：

css: {
  loaderOptions: {
    less: {
      modifyVars: {
        'primary-color': '#1DA57A',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true
    }
  }
},

7. 关于ant design vue中select组件再次选择相同的值无法触发事件的问题

虚拟卡
实体卡

在每个选项上添加click事件

8.关于a-input-number的精度问题

antd a-input-number 的基本使用
问题说明

  在项目中，经常会遇到，一个输入框只能输入数据类型数据，只能输入数据类型的正整数，
或者只能输入保留两位小数的正整数，该文只为解决此问题
1
2
解决方法

使用antd的a-input-number组件
该组件本身已经实现只能输入数值类型，此时不需要去写正则，只需使用precision参数
这里详细解释precision参数
1
2
3
precision 参数

precision（精度）使用来限制数值的详细如下
1
以下代码的输入框只能输入不带小数的正整数（如果你输入了小数点，他会四舍五入到整数）
                      :precision="0"
            style="width: 100%"
            :min="0"
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['number', {rules: [{required: true, message: '请输入人数(正整数)'}]}]" />
1
2
3
4
5
6
7
以下代码的输入框只能输入带两位小数的正整数（如果你输入超过了两位小数点，他会四舍五入到保留两位，如果你没有输入到两位小数，会自动补零）
                      :precision="2"
            style="width: 100%"
            :min="0"
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['workHour', {rules: [{required: true, message: '请输入工时(最多输入两位小数)'}]}]" /ant-design-vue基础知识积累——a-input-number限制只能输入正整数_yehaocheng520的博客-CSDN博客_a-input-number

9.关于getFieldValue 与getFieldsValue获取值的触发不一致

getFieldsValue需要传数组