agua001的博客

vue2 + antd1.7.8 和 vue3 + antd2.2.8表单动态添加删除表单项

vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）

antd Select组件mode="multiple" 限制选中个数

antd 输入框只能输入英文、数字、下划线

vue3 table表格数据过滤展示

vue2 和 vue3 antd 使用Form表单修改编辑时循环对象，使用对象属性的唯一性赋值，antd表单赋值时：赋多赋少都会报错喔

vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据

vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效

antd 输入框必填项校验十位十六进制或者八位字母数字

antd 2.2.8 版本 Form表单使用useForm带星号校验和带星号不校验的写法以及不带星号不校验的写法

antdv Table组件展开行数据对齐表头（自定义表头）

vue3 + antdv Ant Design Vue（2.2.8） 组件样式覆盖 -- 非弹窗和弹窗 -- 全局非全局

antd Table组件使用筛选、排序、自定义设置表头显示

1、a-date-picker：默认当天，限制选择未来日期(后台需要日期区间参数)<a-col :xxl="5" :xl="6" :lg="12"> <a-form-item label="时间" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }" > <a-date-picker style="width: 100%" v-decorator="['timeF

1、需求，在表单中，有上传的必填项，如图：2、遇到的第一坑就是，上传成功但图标一直在上传状态（没加 file-list 属性）3、解决：添加 :file-list=“fileList”，完整代码：// 子组件html :<a-form layout="vertical" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" > <a-row :gutter="5"&g

1、前后一天<div class="time-box"> <button class="time-item" @click="beforeDay(true)" :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'" :disabled="disnone ? true : false" > 前一天 </button> <a-range-picke

一、当天: 两种形式1、非表单<a-range-picker :allowClear="false" v-model="timeForm" class="range-item" style="width: 98%" format="YYYY-MM-DD" :ranges="{ 当天: [moment(), moment()], }" :placeholder="['开始时间', '结束时间']" :disabledDate="disabledDate"

1、添加两个属性：showSearch（使单选模式可搜索） 和 filterOption（是否根据输入项进行筛选）html:<a-col :xxl="8" :xl="12" :sm="24" class="ex-item"> <a-form-item label="关联测站名称：" > <a-select :showSearch="true" placeholder="请选择关联测站名称" v-dec

renderIcon: function (h, icon, key) { if (this.$scopedSlots.icon && icon && icon !== 'none') { console.log(this.$scopedSlots); const vnodes = this.$scopedSlots.icon({icon, key}) vnodes.forEach(vnode => { vnode.data.cl

1、需求：勾选中某个项，表格就展示对应的数据，反之则不显示2、表格的 columns 动态赋值（刚开始默认全部不展示）html: <div class="checkBox"> <a-checkbox @change="changeData" :checked="dataRate"> 数据传输完整率 </a-checkbox> <a-checkbox @change="changeTimely" :checked="timelyRate"

antd 表格内容自适应

<a-col :xxl="5" :xl="6" :lg="12"> <a-form-item label="统计时间"> <!-- <a-range-picker v-decorator="['serviceTime']" format="YYYY-MM-DD" /> --> <a-date-picker v-decorator="['serviceTime']" :disabled-date="dis

1、需求如图（表格中编辑间隔时间和备注）：2、直接贴代码：html：<a-table bordered :columns="inspectionColumns" :dataSource="inspectionData" :pagination="false" rowKey="id"> <template v-for="col in ['intervalTime']" :slot="col" slot-scope="record"

1、在使用到有筛选条件的请求时报了这个错2、封装的筛选条件方法和调用// 获取筛选条件的方法getQuery() { let data = this.form.getFieldsValue(); if(this.form.getFieldValue('time').length > 0) { data.startTime = moment(this.form.getFieldValue('time')[0]).format('YYYY-MM-DD'); data.end

1、调用子组件校验的方法时报错：2、代码：父组件：// 新增修改弹窗确定按钮async handleOk() { let url = this.$url.SITE_MANAGE_LIST_ADD; let method = "str"; let formData = await this.$refs.addCont.getValues(); console.log(formData); // 判断是否在新增修改有选中？ if(formData && form

1、组件内获取到的是moment格式的数据，但往往后台需要的子符串<a-col :xl="10" :lg="12" > <a-form-item label="时间：" :labelCol="{ span: 2 }":wrapperCol="{ span: 17 }"> <a-range-picker v-decorator="['time']" /> </a-form-item></a-col>// 获取搜索条件get

1、antd表单赋值报错：<a-form-item label="月份"> <a-month-picker v-decorator="['month']" disabled format="M月" ></a-month-picker></a-form-item>setValue(data) { let deadline = data && data.deadline? moment(data.de

1、需求场景- 在父组件点击修改按钮，展示子组件并且渲染数据（父组件调用子组件的方法）// 父组件async handleEdit(record) { let res = await this.$http(this.$url.INSPECTION_MONTH_REPORT_INFO + record.record.id, 'get') let {data} = res; if(data.code === 0) { this.$nextTick(() => { this

1、处理antd 下拉数据时遇到报错2、报错代码html:<a-col :xxl="8" :xl="12" :sm="24" class="ex-item"> <a-form-item label="后台IP地址："> <a-select placeholder="请选择后台IP地址" v-decorator="[ 'serverIp']" @select="getPort" > &

1、有时项目中会遇到表单中某个表单项的内容过多而导致展示不完整，如图：2、使用Tooltip组件html:<a-col :xxl="8" :xl="12" :sm="24" class="ex-item"> <a-tooltip> <template slot="title"> {{ tipsTxt }} </template> <a-form-item label="信号质量："> &l

<a-col :md="12" :sm="24" class="ex-item"> <a-form-item label="闸门类型："> <a-select :getCalendarContainer="triggerNode=> triggerNode.parentNode" v-decorator="[ 'floodgateType', { rules: [{ required:

1、问题重现:子组件：setBuildValue(value) { console.log(value); // 文本域字数统计 this.problemNum = 50 - value.swConstructionQuestion.problemDescription.length; this.resultNum = 50 - value.swConstructionQuestion.resultDescription.length; this.buildData

1、需求来源：正常：点击放大缩小旋转按钮出现：2、在控制台找样式看到：3、CSS3 ::selection 选择器： https://www.runoob.com/cssref/sel-selection.html3、解决：（在当前页）::selection { background: none !important;}晚舟已过万重山，感谢强大的祖国！...

1、问题描述：antd 下拉框选择的时候报了这个错误<a-select :defaultValue="0" v-model="executeCycleUnit" @change="handleExecuteNum"> <a-select-option :value="0"> 分钟 </a-select-option> <a-select-option :value="1"> 小时 </a-select-option>&lt

1、根据关键字输入框的值（只对编码，即正整数做处理），动态变化区域的值（区域默认为越秀区）2、编码对应的区域3、思路：把全部空格去掉 - 必须为正整数 - 长度必须大于等于5 - 截取第四个和第五个的字符串 - 对应上则赋值给下拉区域 - 否则都为默认值html:<a-col :xxl="5" :xl="6" :lg="12"> <a-form-item label="关键字："> <a-input onkeyup="this.value=

1、控制台报错2、报错前的操作是给下拉组件添加了方法<a-col :md="5" :sm="24"> <a-form-item label="七夕礼物：" class="singleSearch"> <a-select v-decorator="['inspectionTypeId']" placeholder="请选择七夕礼物" :disabled="inspectionTypeList.length == 0"

1、在echarts 使用resize()Api 屏幕变化的时候报：Uncaught TypeError: Cannot read property ‘resize’ of undefined2、看了大佬的文章：https://blog.youkuaiyun.com/HH18700418030/article/details/96281813虽然没使用到他说的方法，但是使用了评论者的方法，可行3、原先的的代码:mounted() { this.$nextTick(() => { this.my

1、大屏正常，小屏超出宽：1920px宽：1550px2、解决：使用echarts的resize()API （官网地址：https://echarts.apache.org/zh/api.html#%2Fsearch%2Fresize）<div class="contentLeft"> <div id="echartBox" ref="echartBox"></div></div>data() { return { myCha

1、需求：鼠标移入当前单元格，展示所在单元格所有的信息展示（数据结构如下：）2、效果如下（只展示一项，并没有全部展示）：3、修改(slot=“title” 里也进行循环)：<span slot="keyValues" slot-scope="record" class="factoryBox"> <span v-for="(item, index) in record.keyValues" :key="index"> <a-tooltip placeme

1、需求：在总扣分项计算厂家扣分的总和，即当前行的所有val值相加（数据结构图、代码图、效果图）2、无法在slot中计算渲染，所以只能依靠customRender先计算后渲染（customRender官网描述）let total = 0; // 定义总数const columns = [ { title: '测站类型', dataIndex: 'name', key: 'name', width: 150 }, { title: '总扣分',