Ant design Vue 相关设置或问题集合(持续更新...)

目录

1.日期选择框 datePicker设置可选范围在今天或之前

1.1设置":disabled-date"属性

2.设置select下拉框可以进行输入搜索,并且可清除

2.1设置"show-search"和'option-filter-prop="children"'属性

2.2设置allow-celar属性

3.a-form-item标签中的label文字不会自动换行

3.1将label单独写出来并设置white-space样式,不作为属性写在a-form-item标签中

3.2改动后发现行高太大了,怎么办?

4.修改数据,在数据回显的时候发现当回显的数据为空时,下拉框的提示文字(placeholder)不显示。

4.1在数据回显方法中,初始化时,将数据值与"undefined"进行"||"运算

5.a-range-picker时间段监听事件设值与数据回显

5.1监听事件与设值

5.2 数据怎么组合两个参数后进行回显

6.如何自定义form表单里面的校验规则

61.创建一个通用的专门放各种校验规则的js文件(commonRules.js)

6.2在vue页面中引入js文件并进行声明

6.3在form表单元素中进行调用

7.如何使用v-show实现v-if的效果,不显示时不检验,显示时检验

7.1给元素设置一下v-show,并且将实际要控制的表单设置一个自定义的校验

7.2初始化元素一开始是否显示

7.3事件触发导致showParts的改变

7.3 刚刚7.1中自定义的校验方法"validateWh",根据showParts状态改变返回

8.如何设置modal对话框的高度并且可以上下滑动

9.栅格布局下如何调节label和表单元素,使其上下对齐

9.1效果图

9.2实现代码

10.如何让datepicker精确到分钟而不到秒

10.1效果图

10.2实现代码

11.如何将table中的时间进行格式化

12.table中的列,根据id关联出对应的文字,如人员id关联出人员姓名(只在前端实现,不通过sql直接联表出数据)

12.1设置该列的格式化模版

12.2在模版中设置如何进行格式化

12.3自己定义的方法“qjRyTypeFilter”

13.a-tree-select树形下拉框设置按title搜索

14.年份选择器的清除功能失效

14.1年份选择器的写法

14.2发现点击清除之后无法清除数值

14.3解决办法是将其初始化为undefined,注意是没有用引号

15.下拉多选框数据传输到后台的写法

15.1vue组件绑定queryParam.ryLxDmList

 15.2查询方法中的处理


1.日期选择框 datePicker设置可选范围在今天或之前

1.1设置":disabled-date"属性

template部分的代码:

js中method里面定义的beforeToday方法:

2.设置select下拉框可以进行输入搜索,并且可清除

2.1设置"show-search"和'option-filter-prop="children"'属性

2.2设置allow-celar属性

Ant design Vue 相关设置或问题集合(持续更新...)_第1张图片

3.a-form-item标签中的label文字不会自动换行

3.1将label单独写出来并设置white-space样式,不作为属性写在a-form-item标签中

改动前的写法与效果图:

Ant design Vue 相关设置或问题集合(持续更新...)_第2张图片

改动后的写法:

Ant design Vue 相关设置或问题集合(持续更新...)_第3张图片

Ant design Vue 相关设置或问题集合(持续更新...)_第4张图片

3.2改动后发现行高太大了,怎么办?

增加对应的样式:

Ant design Vue 相关设置或问题集合(持续更新...)_第5张图片

效果如图:

4.修改数据,在数据回显的时候发现当回显的数据为空时,下拉框的提示文字(placeholder)不显示。

4.1在数据回显方法中,初始化时,将数据值与"undefined"进行"||"运算

Ant design Vue 相关设置或问题集合(持续更新...)_第6张图片

Ant design Vue 相关设置或问题集合(持续更新...)_第7张图片

设置不正确时的效果图:

设置成功的效果图:

5.a-range-picker时间段监听事件设值与数据回显

5.1监听事件与设值

(1).设置监听事件所触发的方法:onChangeDychtqdsj

Ant design Vue 相关设置或问题集合(持续更新...)_第8张图片

(2).选择时间后触发监听事件,将数据拆分后赋值给bwDychtqdkssj(开始时间)和bwDychtqdjssj(结束时间)这两个变量

(3).在提交方法handleSubmit中,将上面设置的两个变量的值放到传输到后台的参数之中(注意此处设置的这两个时间变量类型是字符串类型,如果后台接收报错,请检查后台接收的数据类型是否为字符串!!!)

Ant design Vue 相关设置或问题集合(持续更新...)_第9张图片

5.2 数据怎么组合两个参数后进行回显

(1).设置v-decorator="['dychtqdsj']"

Ant design Vue 相关设置或问题集合(持续更新...)_第10张图片

(2).将后台传回来的数据按规则组合,并设置在"dychtqdsj'"上面(注意后台传回来的这两个数据是Date类型,所以我需要将它格式化!!!)

6.如何自定义form表单里面的校验规则

61.创建一个通用的专门放各种校验规则的js文件(commonRules.js)

注意,js文件里面export default那一段代码很重要,没有这一个的话,那么js文件里面的方法无法在其他地方调用!!!

//校验身份证号码
const validateIdCard = (rule, value, callback) => {
  if (!value) {
    callback()
  }
  if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
    callback(new Error('请输入正确的二代身份证号码'))
  } else {
    callback()
  }
}

//校验身份证号码和非空
const validateIdCardOrNull = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('身份证号码不能为空'))
  }
  if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
    callback(new Error('请输入正确的二代身份证号码'))
  } else {
    callback()
  }
}

//校验合法ip地址
const validateIP = (rule, value,callback) => {
  if(value==''||value==undefined||value==null){
    callback()
  }else {
    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的IP地址'));
    } else {
      callback();
    }
  }
}

//校验合法ip地址和非空
const validateIPOrNull = (rule, value,callback) => {
  if(value==''||value==undefined||value==null){
    callback(new Error('IP地址不能为空'));
  }else {
    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的IP地址'));
    } else {
      callback();
    }
  }
}

//校验手机号码
const validatePhone = (rule, value,callback) => {
  const reg =/^[1][3-9][0-9]{9}$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的手机号码'));
    } else {
      callback();
    }
  }
}

//校验手机号码和非空
const validatePhoneOrNull = (rule, value,callback) => {
  const reg =/^[1][3-9][0-9]{9}$/;
  if(value==''||value==undefined||value==null){
    return callback(new Error('手机号码不能为空'))
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的手机号码'));
    } else {
      callback();
    }
  }
}

//校验邮箱
const validateEMail = (rule, value,callback) => {
  const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else{
    if (!reg.test(value)){
      callback(new Error('请输入正确的邮箱'));
    } else {
      callback();
    }
  }
}

//校验邮箱和非空
const validateEMailOrNull = (rule, value,callback) => {
  const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  if(value==''||value==undefined||value==null){
    callback(new Error('邮箱不能为空'));
  }else{
    if (!reg.test(value)){
      callback(new Error('请输入正确的邮箱'));
    } else {
      callback();
    }
  }
}

//校验纯数字
const validateNumber = (rule, value, callback) => {
  let numberReg = /^\d+$|^\d+[.]?\d+$/
  if (value !== '') {
    if (!numberReg.test(value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

//校验纯数字和非空
const validateNumberOrNull = (rule, value, callback) => {
  let numberReg = /^\d+$|^\d+[.]?\d+$/
  if (value !== '') {
    if (!numberReg.test(value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  } else {
    callback(new Error('请输入值'))
  }
}

//校验纯中文
const validateChinese = (rule, value, callback) => {
  if (!value) {
    callback()
  }
  if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
    callback(new Error('不可输入特殊字符'))
  } else {
    callback()
  }
}

//校验纯中文和非空
const validateChineseOrNull = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入中文'))
  }
  if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
    callback(new Error('不可输入特殊字符'))
  } else {
    callback()
  }
}

export default {
  validateIdCard,
  validateIdCardOrNull,
  validateIP,
  validateIPOrNull,
  validatePhone,
  validatePhoneOrNull,
  validateEMail,
  validateEMailOrNull,
  validateNumber,
  validateNumberOrNull,
  validateChinese,
  validateChineseOrNull
}

6.2在vue页面中引入js文件并进行声明

Ant design Vue 相关设置或问题集合(持续更新...)_第11张图片

6.3在form表单元素中进行调用

Ant design Vue 相关设置或问题集合(持续更新...)_第12张图片

7.如何使用v-show实现v-if的效果,不显示时不检验,显示时检验

7.1给元素设置一下v-show,并且将实际要控制的表单设置一个自定义的校验

注意我这里的“showParts”和"validateWh",这两个是自定义的,下面会用到

Ant design Vue 相关设置或问题集合(持续更新...)_第13张图片

7.2初始化元素一开始是否显示

Ant design Vue 相关设置或问题集合(持续更新...)_第14张图片

7.3事件触发导致showParts的改变

大家根据自己的实际触发事件来写,我这里是“交流分类”的改变事件“jlFlChange”触发的showParts状态的改变

Ant design Vue 相关设置或问题集合(持续更新...)_第15张图片

Ant design Vue 相关设置或问题集合(持续更新...)_第16张图片

7.3 刚刚7.1中自定义的校验方法"validateWh",根据showParts状态改变返回

Ant design Vue 相关设置或问题集合(持续更新...)_第17张图片

8.如何设置modal对话框的高度并且可以上下滑动

Ant design Vue 相关设置或问题集合(持续更新...)_第18张图片

9.栅格布局下如何调节label和表单元素,使其上下对齐

前提是form是固定了宽度的,所以用了固定值来进行设置,我这里的表单是在modal对话框里面的,modal对话框设置了宽度是900,你们也可以用百分比来调节,要根据实际情况来。

我主要是介绍如何在labelCol和wrapperCol里面写样式。

9.1效果图

不设置的效果图:

Ant design Vue 相关设置或问题集合(持续更新...)_第19张图片

设置后的效果图:

Ant design Vue 相关设置或问题集合(持续更新...)_第20张图片

9.2实现代码

设置前的代码:

Ant design Vue 相关设置或问题集合(持续更新...)_第21张图片

设置后的代码:

Ant design Vue 相关设置或问题集合(持续更新...)_第22张图片

10.如何让datepicker精确到分钟而不到秒

10.1效果图

Ant design Vue 相关设置或问题集合(持续更新...)_第23张图片

10.2实现代码

":show-time"是用于设置控件里面不会出现“秒”这一项选择列

"format"是用于设置点击后回显的数据格式化成“年-月-日 时:分”

Ant design Vue 相关设置或问题集合(持续更新...)_第24张图片

11.如何将table中的时间进行格式化

我这里是格式化显示到分钟

Ant design Vue 相关设置或问题集合(持续更新...)_第25张图片

Ant design Vue 相关设置或问题集合(持续更新...)_第26张图片

12.table中的列,根据id关联出对应的文字,如人员id关联出人员姓名(只在前端实现,不通过sql直接联表出数据)

12.1设置该列的格式化模版

模版名称为"qjRyText":

Ant design Vue 相关设置或问题集合(持续更新...)_第27张图片

12.2在模版中设置如何进行格式化

在模版中规定了用"qjRyTypeFilter"方法来对文字进行处理:

12.3自己定义的方法“qjRyTypeFilter”

这里面的"empList"是事先异步调用后台取回来的数据,数据里面每个对象都有idname的属性。大家根据自己的实际属性名来进行筛选!!!

Ant design Vue 相关设置或问题集合(持续更新...)_第28张图片

解释一下empList是从哪里来的:

1.在data中先声明一下:

Ant design Vue 相关设置或问题集合(持续更新...)_第29张图片

2.在methods中定义方法去异步调用后台数据:

Ant design Vue 相关设置或问题集合(持续更新...)_第30张图片

3.在created中调用定义好的方法给empList进行赋值:

Ant design Vue 相关设置或问题集合(持续更新...)_第31张图片

13.a-tree-select树形下拉框设置按title搜索

Ant design Vue 相关设置或问题集合(持续更新...)_第32张图片

14.年份选择器的清除功能失效

14.1年份选择器的写法

Ant design Vue 相关设置或问题集合(持续更新...)_第33张图片

Ant design Vue 相关设置或问题集合(持续更新...)_第34张图片

14.2发现点击清除之后无法清除数值

14.3解决办法是将其初始化为undefined,注意是没有用引号

年份选择器绑定的值,如果没有进行初始化的话,会导致清除无效。另外一定要初始化为undefined,如果初始化为''的话,虽然功能正常,但会导致控制台报错。

Ant design Vue 相关设置或问题集合(持续更新...)_第35张图片

15.下拉多选框数据传输到后台的写法

15.1vue组件绑定queryParam.ryLxDmList

Ant design Vue 相关设置或问题集合(持续更新...)_第36张图片

 15.2查询方法中的处理

如果没有正确处理,会导致查询后下拉框显示有问题或者参数传到后台的格式有问题

Ant design Vue 相关设置或问题集合(持续更新...)_第37张图片

你可能感兴趣的:(vue,guns,ant,design,vue)