一期Ant Design of Vue 组件 a-image-preview-group 切换图片，a-date-picker时间显示，a-switch开关0.1，a-tooltip卡片排版

<a-image-preview-group v-if="previewimg && previewimg.length > 0"

:preview="{visible}">

<div style="display: none">



<a-image :width="200"

v-for="(item, index) in previewimg"

:key="index"

:src="item.img" />



</div>

1.1效果

2.关于a-date-picker时间显示报错date.locale is not a function

很多人用肯定会报错date.locale is not a function 错误一个点时间显示不对网上教的全部是错误的要看官网

前端肯定是要 "'YYYY-MM-DD HH:mm:ss'" 后端是字符保存问题就是转换的时候没有写对

在组件中不需要使用任何js库解决办法添加 :valueFormat="'YYYY-MM-DD HH:mm:ss'" ！！！！！解决ntd组件库日期组件日期回显时,date.locale is not a function 格式不正确的全部问题需要一个dayjs

记得导入

上代码！！！有问题评论

<a-form-item label="套餐截取时间" name="deadlinef">
<a-date-picker style=" width:100%" v-model:value="formData.deadlinef"
       :valueFormat="'YYYY-MM-DD HH:mm:ss'"
       :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
       locale="zh-CN"
       @change="onChange" @ok="onOk" />

2.1效果

3.a-switch开关0或者1

默认是 true 和false 根据业务来

二个重点

checkedValue='1' unCheckedValue='0' 第一个是开的情况二个是关的情况

                   <a-space direction="vertical">
                       <a-switch v-model:checked="record.stautsf"
                       checkedValue='1' unCheckedValue='0'
                   @change="handleSwitchChange(record)"/>
                   </a-space>

3.1效果图

4.vd的a-tooltip卡片显示排版问题

使用插值表达式首先看你在js还是vue页面先排版好这个是使用 js排版的效果

因为 vd的a-tooltip 没有排版的这些方法属性

<a-tooltip placement="top" overlayClassName="tooltip_class" >

<template #title >
<p v-html="handleMouseOver(value.datas)"></p>
</template>


<div
style="max-width: 200px; overflow: hidden; display: inline-block; white-space: nowrap; text-overflow: ellipsis; background-color: #90EE90; color: #fff; padding: 0 5px; border-radius: 2px; margin-right: 5px;">
{{ value.region }}
</div>
</a-tooltip>

//样式不用spoced
<style lang="less">
.tooltip_class {
max-width: 350px;
}
</style>