日期选择器使用 format 属性，可以自定义日期显示格式。format属性设置无效
<a-date-picker v-model:value="value1" :format="dateFormat" />
<a-date-picker v-model:value="formData.stopTime" value-format="YYYY-MM-DD HH:mm:ss"
show-time placeholder="请选择意见建议截止时间" style="width: 100%" />
<a-form-item
label="身份证"
name="card"
:rules="[
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '请输入有效的身份证号',
trigger: 'change'
},
{ required: true, message: '请输入身份证号!' }
]"
>
<a-input v-model:value="modelRef.card" placeholder="请输入身份证号" />
</a-form-item>
<a-form-item label="电话" name="phone" :rules="[ { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入有效的手机号', trigger: 'change' }, { required: true, message: '请输入手机号!' } ]" > <a-input v-model:value="modelRef.phone" :maxlength="11" placeholder="请输入手机号码" /> </a-form-item> <a-form-item label="预约时间" name="dtime" :rules="[{ required: true, message: '请选择预约时间!' }]"> <a-date-picker v-model:value="modelRef.dtime" value-format="YYYY-MM-DD" placeholder="请选择预约时间" :ranges="timeScopedPre" style="width: 100%" :disabled-date="disabledDate" /> </a-form-item>
<script setup> const disabledDate = (current) => { return current < dayjs('2023-12-29') || current >= dayjs('2024-01-05') </script>
图片上传组件
<!-- v-model:file-list="" 双向绑定 不能覆盖默认上传行为-->
<a-upload
:file-list="urls"
class="avatar-uploader"
list-type="picture-card"
:multiple="true"
:customRequest="customRequestMinio3"
accept="image/png, image/jpeg, image/gif, image/jpg"
>
<div v-if="urls.length < 3">
<plus-outlined />
<div style="margin-top: 8px">Upload</div>
</div>
</a-upload>
input 输入框 maxlength maxLength无效
<a-input v-model="form.dianhua" :maxLength="11" type="number" placeholder="请输入电话"/>
<a-input v-model="form.dianhua" oninput="if(value.length>5)value=value.slice(0,11)" :maxLength="11" type="number" placeholder="请输入电话"/>
treeSelect选中子节点且单选
<a-tree-select
v-model:value="formData.shopId"
style="width: 100%"
:tree-data="treeData"
tree-checkable
allow-clear
:show-checked-strategy="SHOW_PARENT"
placeholder="请选择门店"
tree-node-filter-prop="label"
@change="handleNodeClick"
/>
import { TreeSelect } from 'ant-design-vue' const SHOW_PARENT = TreeSelect.SHOW_PARENT const treeData = ref() // 一维转树形 function userList2Tree(res, shopId) { let deptNameList = Array.from(new Set(res.map((it) => it.shopGrade))) // 部门名称列表 let deptTree = [] // 转树形数据 deptNameList.forEach((it) => { if (it == '') return false let children = [] let valueList = [] res.forEach((item) => { if (it == item.shopGrade) { if (shopId) { if (item.id == shopId) { children.push({ ...item, label: item.shopName, value: item.id }) } else { children.push({ ...item, label: item.shopName, value: item.id, disabled: true }) } } else { children.push({ ...item, label: item.shopName, value: item.id }) } valueList.push(item.id) } }) deptTree.push({ label: it, children, disabled: true, // value: it value: JSON.stringify(valueList) }) }) return deptTree } // 点击节点事件 function handleNodeClick(value) { if (data1.value.length !== 0 && value.length) { let data2 = JSON.parse(JSON.stringify(data1.value)).map((it) => { if (it.id !== value[0]) { it.disabled = true } return it }) treeData.value = userList2Tree(data2) } else if (data1.value.length !== 0 && value.length === 0) { let data2 = JSON.parse(JSON.stringify(data1.value)).map((it) => { if (it.id !== value[0]) { it.disabled = false } return it }) treeData.value = userList2Tree(data2) } } // 回显节点 const onOpen = async (record) => { data1.value = await liShopApi.liShopListAll() treeData.value = userList2Tree(data1.value, record.shopId) visible.value = true }
validator自定义校验
time: [{validator: (_rule, value) => {
if (value) {
if (value / 1 < 0 || value.length > 8 || value % 2 !== 0) {
return Promise.reject('值不能为负数,小数,且不超过8位数!')
} else {
return Promise.resolve()
}
} else {
return Promise.reject('请输入订单取消时长!')
}
}}]
const validateConfirmPass = (rule, value, callback) => {
console.log(this.userForm.newPass)
if (value !== this.userForm.newPass) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
<template #headerCell="{ title, column }">
<span v-if="column.dataIndex=='tname'">
<user-outlined />
{{ title }}
</span>
<span v-if="column.dataIndex=='operation'">
<tool-outlined />
{{ title }}
</span>
</template>
