表单validatefield动态vue

# 一个后端引发前端的BUG 使用的框架是vue 代码里面有一个 获取后台数据 this. data = await fetch() table里面是一些可以编辑的input const dataMock = [ { id: 3, input: '' } ] 大概是一个这样的数据结构 一切正常 一段 ......

需要实现表格 (可以新增行, 表格中直接编辑数据，行可上下拖动重新排序) 实现效果（整行上下拖动之后，序号变化为1，2，3.......，可根据名称看效果哦）： 初始表格： 拖拽后： 1. 安装拖拽插件 npm install sortablejs --save页面中引入 import Sortab ......

子组件 <template> <div class="menuUn Huans"> <a href="javascript:;" class="menuUna flexC fl-bet Huans" @click="menuOnClick('ExtTelStatusComponent')"><p>调 ......

一、labuladong动态规划模板思路 wiki：https://labuladong.gitee.io/algo/di-ling-zh-bfe1b/dong-tai-g-1e688/ 题目： 动态规划模板思路： 二、我自己如何理解【状态】【选择】 以714题目《最佳时机去买卖股票+手续费》为例子 ......

在 vue3 开发中 经常会遇有 动态切换组件 的需求，下面简单写个例子，当然也还有其它方法。 用 component :is= 来变换组件 <div class="IndConK Huans overH" > <!-- 正常组件 <ext-tel-status-component ></ext-t ......

# Nginx是什么？ Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 ，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名 ......

1 // 在线查看 2 showOnline({ id, fileExt, fileName }) { 3 if (fileExt && ['jpg', 'jpeg', 'gif', 'bmp', 'png'].includes(fileExt.toLowerCase())) { 4 downloa ......

编辑时 表单赋值使用 this.$nextTick 即可 this.$nextTick(() => { this.formData = { id: row.id, taskCode: row.taskCode, fullName: row.fullName, priority: row.priori ......

需求就是显示一批头像，正常排列，很简单吧！ 用弹性盒子再加上允许换行，就解决了吗？问题是：头像之间有间隔，就需要加margin-right,问题来了本行最后一个盒子的空隙大了，正好能放下一个头像，这时肯定去掉margin.(这里设定最后一个盒子空隙大，当然也可能正好或者多一点点)。 头像容器宽度不确 ......

起因 需求中， 订单列表中有一列数据需要根据websocket传递的数据实时改变，所以就需要动态改变列表中的值 而且使用的是fastadmin 处理 在对应的js文件的index方法中加入 // 这是一个定时更新列表中数据的方法table.on('load-success.bs.table', fu ......

taskQueue.js export default class TaskQueue { constructor(max = 2) { // 控制请求最大并发数 this.max = max // 队列 用shift方法实现先进先出 this.taskList = [] setTimeout(() ......

v-if，v-else-if，v-else 控制元素是否渲染，不满足条件的时候不会有相应元素。 <div v-if="type 'A'"> A </div> <div v-else-if="type 'B'"> B </div> <div v-else-if="type 'C'"> C </div> ......

directives:{ drag:{ mounted: (el, binding) => { const dragDom = el; const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); el.par ......

1、通过Prop 逐级透传问题（传统老的方法只能逐级传递） 传统方式代码如下： App.vue 1 <template> 2 <h3>祖宗</h3> 3 <Parent :msg="msg"></Parent> 4 </template> 5 6 <script> 7 import Parent f ......

Vue3关于样式的处理跟Vue2是一样的，常用的有以下几种。 1.绑定属性 html部分： <div :class="{ active: isActive }"></div> js部分： data() { return { isActive: true } } 当 isActive 值为true时， ......

Vue： <template> <div> <img :src="database64" width="150px"/> <div> 注：请使用手机微信扫码，并于2分钟内绑定员工账号（二维码为账号独属，请勿分享）。 </div> </div></template><script>import { g ......

自己做项目的时候遇到需要批量下载文件的需求，于是下意识就用了循环url地址数组创建a标签下载的方法，但浏览器有限制，超过10个文件将不能下载，最多下载10个。于是找遍网上文章，终于找到了适用的。在这记录一下，分享给需要的人 首先需要用到两个插件 file-saver 和 jszip 在需要批量下载功 ......

`` ``` 0" :key="index" :label="item.name> ``` 参考：https://zhuanlan.zhihu.com/p/617182749 ......

1.背景 最近gpt很火，于是尝试用gpt来进行古诗词取名，做了一个vue的网站进行展示，第一次部署，踩了一些坑。 2.实施 nodejs安装： 在任意目录执行如下命令进行安装包下载：wget https://npm.taobao.org/mirrors/node/v14.17.6/node-v14 ......

1.安装指定版本 2.改名 3.配置环境变量 ......

前言：怎么说呢，子组件内嵌套了多层对象和数组，业务逻辑也是在子组件内处理，如何修改多层嵌套的对象数组的值？ vue提供了一个this.$set方法去改变对应的值，实测在uniapp打包的微信小程序中无法使用该方法，而在Android端则可以，那有没有两全其美的方法？ 答案是有，在修改深层次的值时可以 ......

前提：每个表单内容一致 用v-for循环数组里每个form表单绑定的对象，循环表单可以动态生成内容 注意事项：如果每个表单的校验规则不一样，需要设置一个检验规则数组（这里数组长度要确定，有点不灵活，还没找到更好的方法），并在每个form里面绑定rules，如果实在弹窗里面的表单，需要在打开窗口的时候 ......

####npm ``` $ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 ``` ####例子 ``` import JsonViewer from 'vue-j ......

npm init vite-app app-name ......

博主记得在一个周五快下班的下午，产品找到我（为什么总感觉周五快下班就来活 😂），跟我说有几个业务列表查询需要加上时间条件过滤数据，这个条件可能会变，不保证以后不修改，这个改动涉及到多个列表查询，于是博主思考了一会想了几种实现方案， 1. 最简单，直接将时间条件写死，由 Service 层传递给 D ......

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。 通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化 ......

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。 通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化 ......

<template> <div class=""> <canvas id="canvas"></canvas> </div> </template> <script setup> import { onMounted } from 'vue'; let d const project3D = (x, ......

<el-table border stripe :data="form.serialDateList" style="width: 100%" :row-class-name="rowClassName"> // rowClassName <el-table-column type="index" ......

1.@input(v-on:input) 此触发方法适合在查询条件或实时规则校验中使用 <input type="text" placeholder="请输入查询内容条件" v-model="inputVal" v-on:input="search" value="" /> 2.@keyup.ent ......