agua001的博客

通过window.location.href 或 window.location.search 获取url的参数集合以及某个参数的值

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

vue 后台返回json数组字符串格式，前端转成数组循环使用

vue3 含文件类型传Form Data数据格式给后台文件参数值异常 file: [object Object]

vue3 table表格数据过滤展示

vue3.2 antd 使用Select组件的搜索filterOption

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

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

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

vue 一个组件中一个或者多个动态echarts图表切换渲染问题；echarts.js:2286 Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

vue3 使用Echarts 的 dataZoom 滑动效果 type: 'inside'或type: 'slider'时无效果以及悬浮层不显示

css 元素使用背景色加透明度，伪元素背景色不生效问题

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

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

html<ul class="mingxing"> <li class="huge">胡歌</li> <li class="huge">江疏影</li></ul>css.mingxing{ .huge { margin-bottom: 10px; } // 选中最有一个li :nth-child (1) { margin-bottom: 0px; }}另一种写法:nth-child { marg

antdv table组件封装成全局组件以及携带自定义表头展示

js 两个简单数组或者json数组比较，获取相同项

[Vue warn]: Unhandled error during execution of component event handler 使用到JSON.stringify()方法时，因为数据格式不对引发的报错

动态设置表头数据，刷新依然是修改最后一次的状态，且显示位置顺序不被打乱，vuex + 本地缓存

vue3 注册全局组件

高德地图自定义点标记、默认点聚合样式、获取点标记信息

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、vue3 使用Form组件的useForm时，浏览器警告报错：2、点击打开找原因：3、我自己写的代码：import { Form } from "ant-design-vue";const useForm = Form.useForm;const { resetFields } = useForm(formData);// 重置const resetSearch = () => { resetFields();};4、useForm 是一个可以独立 Form 组件运行的

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

1、设置开发环境启动命令使用的环境变量 “dev”: “vite --mode development”,在package.json文件中：{ "name": "test", "version": "0.0.0", "scripts": { "dev": "vite --mode development", "build": "vite build", "preview": "vite preview" }, "dependencies": { "a

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

<a-button @click="addNew(false, {})" type="primary" class="btnMargin" icon="plus-circle" >新增设备</a-button><a-button class="btnMarginLeft" @click="editMore" :disabled="selectedRowKeys.length <= 0" :class="{ isDis: sel

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

1、整数: 负整数、0、正整数； 非负整数： 正整数与0<a-col :md="12" :sm="24" class="ex-item"> <a-form-item label="闸宽度(单位m,保留三位小数点)"> <a-input v-decorator="[ 'width', { rules: [ { required: true, message: '请输入闸宽度' }

1、问题2、在flex: 1的样式加min-width: 0css好难5555555555

1、需求: 可以在当前数组拖动，亦可拖动到其它数组, 如图：2、最开始都是空数组，后来左边数组有数据，右边还是空数组，但是发现拖动无效<div class="itemBox"> <div class="checkBox"> <div class="checkBox_top"> 显示监测项 </div> <div class="checkBox_bm"> <div class="titl

<ul class="tab_ul"> <li class="tab_li" @click="changeTab(item, index)" :class="{'tabActive': tabActive == index}" v-for="(item, index) in tabList" :key="index" v-cloak>{{ item.name }}</li></ul>.tab_ul { display:-webkit-b

1、点击展开当前行，使用当前行的对象渲染基本的信息，使用当前行的id请求获取展开行里的表格数据2、问题来了：点击第一个展开获取到的数据是正常的，点击第二个，获取到的表格数据会覆盖第一个表格的数据，即最新点击获取的展开行的表格数据覆盖前面打开的行的表格数据3、代码：父组件：<a-table :columns="columns" :dataSource="dataSource" :row-selection="{ selectedRowKeys: selectedRowKe

1、在孙组件里定义事件，通过$emit把值传出去孙组件：planPop.vue<template slot="action" slot-scope="record"> <span @click="handleDetail(record)" class="detailBtn">查看</span></template>// 点击查看handleDetail(record) { this.$emit('showPlanImg', true);

antd 表格内容自适应

1、需求：在首页展示实时时间点儿，离开首页清除定时器，刚开始的做法：父组件：home.vue<page-head ref="pageHead" />activated() { this.$nextTick(() => { this.$refs.pageHead.startTime(); })},子组件pageHead.vue<div class="weather"> <span>{{ timeDate }}</span&gt

项目中比较常用的就是点击某个高亮，如：:class="{'active': activeTab === index}"突然遇到比较复杂的需求，比如根据客户类型展示不一样的样式（有很多种客户类型，每个都不一样）以前百度看到有很多种方法，都没有一一去尝试，直到自己需要用的时候才…（想起流浪地球— 起初没有人在意这场灾难，直到它和每个人息息相关）哈哈… <div class="evaluateLi_cusType_common" :class="{'evaluateLi_cusType':