sunshineTing2的博客

【代码】Vue ElementUI实现表格内文字居中。

【ant-design-vue】table表格设置行属性customRow。

VUE展示JSON数据

Vue实现多页打印（ print.js）

在Vue2中，v-for的优先级是高于v-if，同时使用的话，每次循环都会遍历整个列表，造成资源浪费。所以实践中不应该把v-for和v-if放一起使用。：使用计算属性过滤列表数据。

在使用 JTopo绘制流程图 后, 页面上的 文本输入框(input)通过键盘左右键移动光标失效。jtopo-0.4.8.js 中的m(b) 方法，对4个方向键 进行了屏蔽，放开屏蔽即可。

Jtopo是一款完全基于HTML5 Canvas的数据关系+交互式图形库，可以快速创建一些拓扑关系图、交互式图形软件、监控告警等可视化软件。步骤：

问题swiper中使用echarts，设置循环loop播放slide中第一个和最后一个echarts图展示不出来。原因使用以前通用的模式循环在echarts中使用id或者$refs获取元素初始化绘图不成功，被复制的div中没有复制canvas（没有进行绘图操作）。解决const chartDom = document.getElementsByClassName('radar')chartDom.forEach(item => { const myChart = this.$echar

前言在VUE项目开发过程中，遇到一个很奇怪的表单赋值问题，赋值为生效，而当遇到下拉框切换时，上一个值显示出来了。定位问题1、在data中只定一个formData对象，其中有20多个表单项未定义2、当后端数据返回时，前端直接赋值，未生效，采用$forceupdate()解决了问题3、但是又偶然遇到另一个问题，就是必须下拉框变化时才更新数据。原因原因：如果在实例创建之后添加新的属性到实例上（赋值），它不会触发视图更新。由此Vue实例创建时，表单属性名并未声明，因此Vue就无法对属性执行 gett

轮播组件使用注意事项，需安装vue-awesome-swiper和swiper其中vue-awesome-swiper@3、swiper@4，否则会导致一些莫名的错误第一步，安装插件npm install --save-dev vue-awesome-swiper@3 swiper@4第二步，在页面中按需引入import { swiper, swiperSlide } from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'ex

vue-particles粒子特效第一步：下载包 vue-particlesnpm install --save vue-particles第二步：在main.js中引入 vue-particles包import VueParticles from "vue-particles";Vue.use(VueParticles)第三步：在.vue文件中使用 VueParticles<vue-particles color="#0293dd" :particl

原方法/** 方法调用 */handleDelete() { this.$confirm( '此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then( this.$message.info('已删除') // 并执行删除相关操作 ) .ca

背景：在v-for循环中加v-if 展示子组件报错用 $refs 调用子组件方法时 出现 undefinedthis.$refs.createForm.submitForm()正确解决: 需要指定 indexthis.$refs.createForm[0].submitForm()

错误信息npm ERR! code 128npm ERR! Command failed: git clone --mirror -q git://github.com/adobe-webplatform/eve.git C:\Users\admin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-3410726e\.git --config core.longpaths=truenpm ERR! warning: templates not fo

在vue路由器中获取所有路由$router.options.routes

问题：用nginx发布代码，vue项目跟路径可正常打开，但是鼠标右键打开带路由的页面显示404解决：nginx配置加上location / { try_files $uri $uri/ /index.html;}

1、第一步先用getAllConnections方法获取所有连线数据2、通过setPaintStyle方法重新绘制线条颜色// 获取所有连接线var connection = this.jsPlumb.getAllConnections() connection.map(item => { item.setPaintStyle({ stroke: 'red' }) // 重新绘制线颜色为红色})...

VUE： v-for循环对象(val, key, index) 分别代表 (值， 键， 索引)<div v-for="(val, key, index) in list"> <span>值：{{ val }}</span> <span>键：{{ key }}</span> <span>索引：{{ index }}</span></div>list: { '1': 'name', '2':

对象的长度不能用.length获取，用js原生的Object.keys可以获取到var obj = {'1' : 'Tom' , '2' : 'male' , '5' : '14'}; var arr = Object.keys(obj); console.log(arr); // ['1','2','5'] console.log(arr.length); //3

问题问题：在单选组件（radio）切换后，修改了来自父组件的值（item），然后报错如下：原因prop是单向绑定，不能更改数据，只能由父组件传输过来解决1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错2、使用.sync修饰符与$emit(update:xxx)父组件<comp :item.sync="item"></comp>子组件this.$emit

项目需求1、多级菜单里面配置了一个跳转的页面路由，这里希望跳转并打开新窗口；2、因为是用了Ant-design封装好的路由组件import Menu from 'ant-design-vue/es/menu'替换不了代码，所以换了个思路3、使用watch监听当前路由path，若当前path=xx，就跳转并打开新窗口实现代码watch: { /** 数据共享门户 打开新窗口*/ '$route'(to, from) { if(to.path === '/xxName')

项目背景在VUE项目中，引入了某个页面组件，项目能正常运行，但是在编译的时候报错"export 'DepartSelect' was not found in '@/components/tools/DepartSelect'错误写法在页面中引入 DepartSelect 组件，错误写法import { DepartSelect } from '@/components/tools/DepartSelect'正确写法import DepartSelect from '@/component

Props with type Object/Array must use a factory function to return the default value错误写法props: { list: { type: Array, default:[], required: false, },}父组件传值给子组件，props正确写法props: { list: { type: Array, de

在change的默认事件中添加自定义参数@change="(...args) => onChange(...args, '自定义参数')"@change="change($event, '自定义参数')"@change="(value, selectedOptions) => onChange(value, selectedOptions, '自定义参数')"示例<a-cascader :options="formatArr" :s

使用懒加载之后，可能会造成的问题有，导航点击没用，加载模块出现错误报错信息vue-router.esm.js?8c4f:2314 ChunkLoadError: Loading chunk 85 failed.(missing: http://localhost:3001/fail.js) at Function.requireEnsure [as e] (app.js:875) at Function.fn.e (app.js:156) at component (route

VUE+AntDesign使用sortable.js实现表格拖拽第一步：下载sortablejs插件npm install sortablejs --save第二步：在页面中引入sortablejsimport Sortable from 'sortablejs'第三步：编写 rowDrop方法实现行拖拽methods: {/** Sortable 行拖拽 */ rowDrop() { const tbody = document.querySelector(".ant

【代码】axios 的get和post写法。

、

问题复现：<a href="www.baidu.com">跳转百度</a>原因：a链接跳转 href属性要带上协议，否则会默认拼接当前网址；正确写法：<a href="http://www.baidu.com">跳转百度</a>

参考链接：Vue-cli3 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)在vue.config.js里 添加configureWebpack : { performance: { hints: 'warning', //入口起点的最大体积 整数类型（以字节为单位） maxEntrypointSize: 5

一般服务器分为本地环境，测试环境，正式环境，有的还包括预发布环境，此时我们需要配置不同的环境,获取不同的apiUrl前缀，避免了频繁手动更改api。在根目录下添加一下几个文件文件环境NODE_ENV.env通用环境变量(各个mode通用).env.development本地开发环境NODE_ENV = ‘development’.env.new正式生产环境NODE_ENV = ‘production’.env.pred预发布环境NODE_ENV

项目描述：请求接口有数据时，展示echarts图表（display:block），否则就展示默认提示无数据(图表：display:none)，DOM元素设置高度400px，宽度100%；// 其中父元素为 '#fatherGraph',当前元素为'#chartGraph',根据变量'elementShow'判断是否展示<div id="fatherGraph" :class="elementShow ? 'displayBlock' : 'displayNone'"> <d

Vue中 使用element 报错解决办法：在main.js中引入echartsimport * as echarts from 'echarts'

CSS.ar{ width: 100% !important; text-align: right; // 居右 direction: rtl; // 从右向左读 }JS起止年份显示问题: 年份大的居左，年份小的居右;使用正则表达式，找到两组年份，两组年份中间有“-”号，对调两组年份顺序。/** ar format 2019-2021 -> 2021-2019 */formatAr(name) { var str = n

一、ElementUI el-input框添加回车事件 @keyup.enter.native=""二、ElementUI 点enter回车搜索 ，发现地址栏后面多了个？不触发搜索方法，而直接刷新页面了！这是由于 W3C 标准中有如下规定：When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to

项目需求： 根据经纬度在地图上标记（14种不同类型的标记）出位置，点击标记后出现 详细内容，再点击内容跳转页面一、下载 echarts 包npm install --save echarts二、在 main.js中 引入echarts 和 引入世界地图jsimport echarts from 'echarts' // 引入echartsimport '../node_modules/echarts/map/js/world.js' // 引入世界地图Vue.prototype.$ech

directive 自定义指令可全局引入，也可单页面引入1⃣️ 在当前页面使用directive<div> <p v-red>在当前页面使用directive，演示：当前标签背景为红色</p> <p v-pemi="user">权限为 user 不展示</p> <p v-pemi="admin">权限为 admin 展示</p></div>directives: { red: {

项目需求：XX项目时间赶，主做PC端，移动端是在原有基础上改动，在这一基础上，建议直接采用@media 媒体查询对大小屏幕进行css调整，通过window.screen.width判断屏幕宽度一、需要一个全局globalMixin.js，判断当前屏幕为移动端还是PC端export const GlobalMixin = { data() { return { isApp: false // true：代表移动端，false：代表PC端 } }, crea

设计稿如下：（世界地图 七大洲xx分布 ）用echart插件实现效果如下：（差别很大），需要换思路最终前端实现效果：（svg图片 + 数据 + 标记 + 小动画）最终使用由设计提供的svg图片实现（后台动态数据接入）用样式标记出位置，:style 实现通过相同name，将默认位置数据与后端返回的数据 聚合在一起，concatLocate()完成效果后考虑加上小动画(圆圈荡漾) 动画 ripple<template> <div class="worldBox"&

从home页面 -链接- list页面第一步：在home页面用a标签设置锚链接<!-- home.vue--><a href="/list#Scientists">跳去列表页 科学家</a><a href="/list#Innovators">跳去列表页 创新者</a>第二步：在list页面设置id属性<!-- list.vue--><p id="Scientists"> 列表页科学家内容