Ant design Vue 相关设置或问题集合(持续更新...)
目录1.日期选择框 datePicker设置可选范围在今天或之前1.1设置":disabled-date"属性2.设置select下拉框可以进行输入搜索2.1设置"show-search"和'option-filter-prop="children"'属性3.a-form-item标签中的label文字不会自动换行3.1将label单独写出来并设置white-space样式,不作为属性写在a-fo
目录
1.日期选择框 datePicker设置可选范围在今天或之前
2.1设置"show-search"和'option-filter-prop="children"'属性
3.a-form-item标签中的label文字不会自动换行
3.1将label单独写出来并设置white-space样式,不作为属性写在a-form-item标签中
4.修改数据,在数据回显的时候发现当回显的数据为空时,下拉框的提示文字(placeholder)不显示。
4.1在数据回显方法中,初始化时,将数据值与"undefined"进行"||"运算
5.a-range-picker时间段监听事件设值与数据回显
61.创建一个通用的专门放各种校验规则的js文件(commonRules.js)
7.如何使用v-show实现v-if的效果,不显示时不检验,显示时检验
7.1给元素设置一下v-show,并且将实际要控制的表单设置一个自定义的校验
7.3 刚刚7.1中自定义的校验方法"validateWh",根据showParts状态改变返回
12.table中的列,根据id关联出对应的文字,如人员id关联出人员姓名(只在前端实现,不通过sql直接联表出数据)
13.a-tree-select树形下拉框设置按title搜索
14.3解决办法是将其初始化为undefined,注意是没有用引号
15.1vue组件绑定queryParam.ryLxDmList
1.日期选择框 datePicker设置可选范围在今天或之前
1.1设置":disabled-date"属性
template部分的代码:
js中method里面定义的beforeToday方法:
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监听事件与设值
(1).设置监听事件所触发的方法:onChangeDychtqdsj
(2).选择时间后触发监听事件,将数据拆分后赋值给bwDychtqdkssj(开始时间)和bwDychtqdjssj(结束时间)这两个变量
(3).在提交方法handleSubmit中,将上面设置的两个变量的值放到传输到后台的参数之中(注意此处设置的这两个时间变量类型是字符串类型,如果后台接收报错,请检查后台接收的数据类型是否为字符串!!!)
5.2 数据怎么组合两个参数后进行回显
(1).设置v-decorator="['dychtqdsj']"
(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文件并进行声明
6.3在form表单元素中进行调用
7.如何使用v-show实现v-if的效果,不显示时不检验,显示时检验
7.1给元素设置一下v-show,并且将实际要控制的表单设置一个自定义的校验
注意我这里的“showParts”和"validateWh",这两个是自定义的,下面会用到
7.2初始化元素一开始是否显示
7.3事件触发导致showParts的改变
大家根据自己的实际触发事件来写,我这里是“交流分类”的改变事件“jlFlChange”触发的showParts状态的改变
7.3 刚刚7.1中自定义的校验方法"validateWh",根据showParts状态改变返回
8.如何设置modal对话框的高度并且可以上下滑动
9.栅格布局下如何调节label和表单元素,使其上下对齐
前提是form是固定了宽度的,所以用了固定值来进行设置,我这里的表单是在modal对话框里面的,modal对话框设置了宽度是900,你们也可以用百分比来调节,要根据实际情况来。
我主要是介绍如何在labelCol和wrapperCol里面写样式。
9.1效果图
不设置的效果图:
设置后的效果图:
9.2实现代码
设置前的代码:
设置后的代码:
10.如何让datepicker精确到分钟而不到秒
10.1效果图
10.2实现代码
":show-time"是用于设置控件里面不会出现“秒”这一项选择列
"format"是用于设置点击后回显的数据格式化成“年-月-日 时:分”
11.如何将table中的时间进行格式化
我这里是格式化显示到分钟
12.table中的列,根据id关联出对应的文字,如人员id关联出人员姓名(只在前端实现,不通过sql直接联表出数据)
12.1设置该列的格式化模版
模版名称为"qjRyText":
12.2在模版中设置如何进行格式化
在模版中规定了用"qjRyTypeFilter"方法来对文字进行处理:
12.3自己定义的方法“qjRyTypeFilter”
这里面的"empList"是事先异步调用后台取回来的数据,数据里面每个对象都有id和name的属性。大家根据自己的实际属性名来进行筛选!!!
解释一下empList是从哪里来的:
1.在data中先声明一下:
2.在methods中定义方法去异步调用后台数据:
3.在created中调用定义好的方法给empList进行赋值:
13.a-tree-select树形下拉框设置按title搜索
14.年份选择器的清除功能失效
14.1年份选择器的写法
14.2发现点击清除之后无法清除数值
14.3解决办法是将其初始化为undefined,注意是没有用引号
年份选择器绑定的值,如果没有进行初始化的话,会导致清除无效。另外一定要初始化为undefined,如果初始化为''的话,虽然功能正常,但会导致控制台报错。
15.下拉多选框数据传输到后台的写法
15.1vue组件绑定queryParam.ryLxDmList
15.2查询方法中的处理
如果没有正确处理,会导致查询后下拉框显示有问题或者参数传到后台的格式有问题
更多推荐
所有评论(0)