![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
qwe122343
这个作者很懒,什么都没留下…
展开
-
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.原创 2022-10-17 19:43:28 · 344 阅读 · 0 评论 -
Ant Design Vue table 表格某一行改变文字颜色
Ant Design Vue table 表格某一行改变文字颜色原创 2022-03-25 21:00:06 · 9752 阅读 · 7 评论 -
Ant Design Vue Modal 对话框 this.$warning is not a function
Modal 对话框十分常用,但用官网这个信息提示模板竟然报错了warning() { this.$warning({ title: 'This is a warning message', content: 'some messages...some messages...', });},简单粗暴的结论:this.$warning应该改成Modal.warning改后:warning() { Modal.warning({ title: 'This原创 2022-03-24 15:09:03 · 2935 阅读 · 1 评论 -
Ant Design Vue Input 输入框设置只读
<a-input v-model="A" placeholder="请输入"/>只读 readonly 需要写成 readOnly<a-input v-model="A" placeholder="请输入" readOnly/>原创 2021-12-10 16:05:03 · 6755 阅读 · 0 评论 -
quill-image-drop-module 装的速度过慢
npm装的太慢了 改用cnpm即可原创 2021-07-20 15:22:34 · 169 阅读 · 0 评论 -
ant design vue 表格 Table 实现导出功能
当你搜这个问题的时候,我想你已经知道了 ant design vue 的 Table 组件没有导出功能,比用 View UI 麻烦一点话不多说 直接上可以跑的代码供大家参考使用表格写两个,一个导出用,隐藏掉;另一个展示用。主要是 data-source 绑定的值不同<!--导出用--><a-table bordered :columns="columns1" :data-source="infoListExport" id="tableExport" rowKe原创 2021-06-28 10:27:51 · 5124 阅读 · 5 评论 -
[Vue warn]: Failed to resolve directive: ant-portal (found in <Anonymous>)
使用场景:Ant Design Vue 1.75 局部引入 Modal 组件,Vue 2import { Input, Button, Modal } from 'ant-design-vue';export default { name: "BasicInformationOfUndergraduate", components: { 'a-input': Input, 'a-button': Button, 'a-modal': Modal, }, ...原创 2021-06-23 10:52:55 · 1912 阅读 · 0 评论 -
Vue3 TypeScript 子传父 emit 的使用
和 Vue2 子传父案例简单入门 相比,Vue 3 子传父的 emit 使用略有不同,同样 通过 Father.vue 和 Child.vue 展示首先是 Child.vue,重点在 setup 函数中引入 context 形参,配合 emit 使用。定义了两个函数,toFatherNum(), toFatherObject() 分别向父组件传递数字和对象<template> <a-button @click="toFatherNum">子传父数字</a-button&原创 2021-04-24 10:30:17 · 4857 阅读 · 0 评论 -
Ant Design Vue 表格无法编辑解决方案
一个简单的需求:直接编辑表格中的内容,比如顺序号这一项但始终无法编辑,查了好久终于发现问题出在表格绑定的数组 data 上,它不是响应式的const data = [ { key: '1', name: 'John Brown', age: 32 }, { key: '2', name: 'Jim Green', age: 42 }, { key: '3', name: 'Joe Black', age: 33 }, ];得做成响应式才行!const data = re原创 2021-04-21 15:02:24 · 1748 阅读 · 0 评论 -
Ant Design Vue Select 选择器隐藏下拉菜单
根据业务需求,不想让下拉框展示出来,本想自己修改样式原来 Ant Design Vue 已经为我们写好,使用参数 open 即可,可控制是否展开下拉菜单:open="false"<a-select mode="multiple" v-model:value="formState.name4" class="formLength" placeholder="请点击选择按钮" :open="false">...原创 2021-04-20 20:29:58 · 4741 阅读 · 0 评论 -
View UI 定制主题安装 less 报错及踩坑记录
View UI定制主题地址使用的是推荐的变量覆盖方法,新建目录如 my-theme,在 my-theme 下新建 index.less,然后在入口文件 main.js 内导入这个 less 文件,这些都做好之后,因为项目没有安装 less,开始了报错之旅简单易懂版:安装 less 后各种报错出在 less 和 less-loader 的版本上,安装时不指定版本我这里显示 + less-loader@8.1.1,+ less@4.1.1,需要降低版本才行,比如 + less-loader@5.0.0,+原创 2021-04-16 09:55:15 · 746 阅读 · 0 评论 -
TS2532: Object is possibly ‘undefined‘
TypeScript 的规矩很多,用起来很是严谨。定义了一个函数的接口,参数 x, y, z ( z可选 ) 均为number,返回值为 number 类型interface AddFunction22 { (x: number, y: number, z?: number): number;}const add3333: AddFunction22 = (x, y, z) => x + y + z;console.log(add3333(23, 546, 67));然后就报错:原创 2021-04-07 11:56:12 · 13723 阅读 · 0 评论 -
Ant Design Vue resetFields 表单重置不生效
使用 Ant Design Vue 的 resetFields 重置表单,当新增表单和编辑表单公用一套样式的时候, 编辑完成后点击新增还会出现老数据,如果只是简单的新增则一切正常,不知道各位有没有遇到这个问题几经搜索:发现 resetFields 作用不是清空表单,而是将所有字段值重置为初始值。因此点编辑时因为表单有初始值信息,修改完关闭后 resetFields 会保留初始值, 再次点击新增时就出现了难缠的老数据。改进方法: 点击新增时增加调用置空表单字段的方法function resetF原创 2021-04-02 17:05:39 · 6454 阅读 · 2 评论 -
Ant Design Vue 输入框绑定不上值解决方案
在使用 Ant Design Vue 练习动态增减表单项时,发现输入框无法绑定值,原因出在 <a-input> 标签的写法上。错误写法:<a-input v-model="item.value"></a-input>正确写法:在 v-model 后面增加 :value<a-input v-model:value="item.value"></a-input>...原创 2021-04-02 15:02:07 · 5132 阅读 · 5 评论 -
antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key
用了 Ant Design Vue 之后,遇到了一些 iView 中没遇到过的问题,只能一个一个解决。在使用 Table 组件渲染后台返回数据时,提示 antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key大致意思就是表格里每条数据都需要一个 key,只能满足它的要求 =_=原来的 a-table<a-table :dataSource="data1.dat原创 2021-03-21 11:28:38 · 3782 阅读 · 0 评论 -
‘vite‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
运行一个由 Vite 构建的 Vue3 项目,之前还好好的能正常跑,但拉取新代码之后再次执行 npm run dev 就提示 ‘vite’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。百思不得其解,最终解决方案如下:1、删除 node_modules 文件夹 和 package-lock.json 文件2、重新执行 npm i 安装依赖3、npm run dev 启动项目...原创 2021-03-21 10:47:59 · 77393 阅读 · 5 评论 -
Ant Design Vue 的 formRef.value.resetFields() 不生效
从 iView 转过来写 Ant Design Vue,还是有些不同的地方。比如在用 Form 表单时 发现清空表单功能竟然不好使了<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" ref="formRef"> <!--没加name不生效!!相当于iView中的prop--> <a-form-item label="节点名称"> <a-input v原创 2021-03-18 10:59:30 · 4096 阅读 · 1 评论 -
Ant Design Vue 的 Select 选择器 placeholder 不显示
<span style="margin-right: 10px">节点类型</span><a-select v-model:value="value1" placeholder="请选择" style="width: 13%;margin-right: 25px"> <a-select-option value="jack">Jack</a-select-option> <a-select-option value="原创 2021-03-18 09:29:01 · 1406 阅读 · 0 评论 -
如何运行 kevinchappell / formBuilder
kevinchappell / formBuilderclone 到本地解压后不知怎么运行,README.md 中没有给出命令费了一番波折 终于在 docs 文件夹下找到了npm installnpm start原创 2021-03-11 15:01:55 · 103 阅读 · 0 评论 -
升级 Vue 版本及踩坑记录
cnpm install -g @vue/cli↑ 只需在命令行中执行上述语句即可快速更新 Vue 版本,目前是 @vue/cli 4.5.11注意是 cnpm,如果是 npm 可能报错,输入 vue -V 提示 ‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件。如果之前没有安装过 Vue,可以参考如下博客Vue CLI 脚手架安装教程...原创 2021-02-22 16:08:27 · 1107 阅读 · 1 评论 -
Git 上传项目文件时忽略 .idea 文件
用 Webstorm 编译器会产生.idea 文件,这个可以不用上传,Vue 项目中有一个文件叫 .gitignore,修改它即可默认忽略上传 node_modules,忽略 .idea 需要加上 /才行原创 2020-12-25 09:44:41 · 1467 阅读 · 0 评论 -
解决 ViewUI 表格无数据时展示滚动条的问题
如图所示,滚动条其实可以考虑去除,需要修改 ViewUI 的默认样式.ivu-table-tip,将 overflow-x 的值由 auto 改成 hidden!important 即可<style> .ivu-table-tip{ overflow-x:hidden!important; }</style>清爽很多!...原创 2020-12-25 09:38:26 · 964 阅读 · 0 评论 -
ViewUI 中 DatePicker 日期选择器在 IE11 浏览器中兼容解决方案
DatePicker 日期选择器 在 IE 11浏览器中无法弹出日期,在 Chrome 浏览器中功能正常,解决方案如下:在控制台中执行 npm install --save-dev babel-polyfill在 main.js 中进行引入 import 'babel-polyfill'再次在 IE 浏览器中运行,成功弹出日期但是这是对 IE11 的支持, IE 9 和 10 还是会出现问题,日期在弹出框的后面展示...原创 2020-12-23 17:50:16 · 553 阅读 · 1 评论 -
Echarts 3D 图运行报错 Error: Component series.bar3D not exists. Load it first
Vue 中使用 Echarts 简单入门——小白必看在 Vue 中用 Echarts 的 3D图形报了这个错误,Error: Component series.bar3D not exists. Load it first问题解决办法如下:1、npm install echarts-gl2、在 main.js 中引入import echartsGL from 'echarts-gl'Vue.prototype.$echartsGL = echartsGL即可成功运行起来 3D 图..原创 2020-12-21 17:36:49 · 5996 阅读 · 0 评论 -
Reveal.js 简单使用总结
Reveal.js 是一个使用 HTML 创建交互式幻灯片的 Web 框架,在使用过程中有了一些总结收获,本文主要针对有前端基础的同学进行介绍。基础操作首先是下载 Reveal.js 压缩包解压后我习惯性用 Webstorm 进行打开,基础操作可以不执行任何命令,直接打开 index.html 进行编辑即可一个 section 表示是一张 PPT,section 如果没有嵌套关系是向右滑动的逻辑在浏览器中打开 index.html 效果如图如果 section 有嵌套,会产生向下滑动的逻辑原创 2020-12-18 11:44:27 · 2840 阅读 · 0 评论 -
Echarts 设置柱状图 y 轴最小刻度为1
Echarts x轴文字显示不全、间隔显示问题Echarts 饼图不显示 / 隐藏数据为 0 的展示项在 Vue 中使用 Echarts 很常见,但实现起来有很多可以优化的小细节,这篇博客主要介绍设置 y 轴最小刻度为1,因为有些统计情况不涉及小数,改变需要使用关键词 minInterval,放在 yAxis 里。如果需要更大的最小刻度,直接改变数值即可yAxis: [ { type: 'value', minInterval: 1, // 最小单位是1 }],原创 2020-12-15 20:34:00 · 4983 阅读 · 0 评论 -
CSS 鼠标悬浮在图片上添加遮罩层
先看效果:鼠标移在图片上时,添加阴影效果+文字 / 图标实现的关键是 CSS 的 opacity 和 hover,本文也主要介绍遮罩层的实现HTML:<div class="img_div"> <img src="item.image_base64" @click="deleteImg" class="imgCSS"> <div class="mask"> <h3><Icon type="ios-trash-outlin原创 2020-12-15 17:39:29 · 6039 阅读 · 0 评论 -
Echarts 饼图不显示 / 隐藏数据为 0 的展示项
饼图里有好多数据为 0 的项,看起来很是繁杂,最好进行隐藏处理成下图形式,解决方案是对于 value 为 0 的项,赋值成’–’this.dataList.forEach((v) => { if (v.value === 0) { v.value = '--'; }});最终效果如下:清爽很多...原创 2020-12-15 17:11:58 · 6006 阅读 · 3 评论 -
Echarts x轴文字显示不全、间隔显示问题
在 Vue 中使用 Echarts 渲染数据时,X 轴存在数据过多间隔显示文字的问题,考虑过缩短 X轴文字长度截取前几个字展示的解决方案,但效果不是很好,治标不治本。Echarts中提供了解决方案,关键词是 interval(间隔,间隙)xAxis: [ { axisLabel:{ interval: 0, // rotate:40, } }, ]原创 2020-12-15 16:59:40 · 4018 阅读 · 0 评论 -
[Vue warn]: Error in render: “TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot
报错如图,问题在于 Table 中没用到 slot,columns中定义了 slot,导致报错<Table border :columns="columns" :data="infolist"></Table>columns: [ { title: '选择', slot: 'choose', width: 80, align: 'center', }, .原创 2020-11-01 16:26:11 · 975 阅读 · 0 评论 -
Vue 中使用 watch 方法实时获取路由信息
话不多说,先上代码:watch: { $route: { handler(route) { console.log(route); }, immediate: true, // 此项须设置为true }, },注意 immediate: true, 这句话得有以上简单的几行代码,可实时获取当前页面的路由信息。打印 route 的信息,从中可以拿到很多内容,方便我们进行各种处理...原创 2020-10-29 10:30:27 · 933 阅读 · 0 评论 -
VIew UI 表格勾选功能@on-select、@on-select-all在 Vue 中的使用介绍
通过给 columns 数据设置一项,指定 type: ‘selection’,即可自动开启多选功能。给 data 项设置特殊 key _checked: true 可以默认选中当前项。给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。正确使用好以下事件,可以达到需要的效果:@on-select,选中某一项触发,返回值为 selection 和 row,分别为已选项和刚选择的项。@on-select-all,点击全选时触发,返回值为 selection,已选项.原创 2020-10-27 09:36:30 · 3993 阅读 · 3 评论 -
Vue 中用 HTML + CSS 实现 Tabs 标签页绘制
上一篇博客介绍了Vue 中用 HTML + CSS 实现导航按钮动画绘制,这一篇介绍绘制 Tabs 标签页的过程,先看效果:默认是 Tab1 亮起鼠标指针滑到 Tab2,Tab2亮起点击 Tab3,Tab3 亮起绘制过程很简单,最重要的是用到了 border-bottom,相比其他复杂的实现过程看起来更为容易,希望能帮助到自己画 Tabs 标签页的朋友们<template> <div class="tabBarArea"> <div cl原创 2020-10-26 09:02:20 · 772 阅读 · 0 评论 -
Vue 中用 HTML + CSS 实现导航按钮动画绘制
先看效果:默认 按钮1 亮鼠标指针滑动到 按钮2 按钮2 字体颜色改变鼠标指针点击 按钮3, 按钮3亮起下面是实现过程:用的 float 布局,tabButtonActive 的 class 和 style 绑定,有需要的小伙伴可以参考<template> <div class="tabBarArea"> <div class="tabButton" :class="[tabName=='按钮1'?'tabButtonActive':'']"原创 2020-10-26 00:21:27 · 482 阅读 · 1 评论 -
@on-change 事件无法触发解决方案
在用 View UI 的分页功能时,执行 @on-change 函数事件一直无法触发,点击页码时页面不会刷新相关代码如下<!--html--><Page :total="pageTotal" show-elevator @on-change="pageChange()" :current='page_num' :page-size="15"/>// javascriptpageChange(value) { this.page_num = valu原创 2020-10-17 15:42:15 · 3097 阅读 · 0 评论 -
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘exportCsv‘ of undefined“
用 VIew UI 自带的Table 表格导出原始数据文件功能但运行报错,经过查找原因如下javascript 代码里 this.$refs. 后面跟着的名字需要与 html 中 Table 标签内 ref 跟着的名字一样,我这里的 html 中没有写 ref =“table”,所以运行会报错修改前:<!--html代码--><Table border :columns="columns" :data="infolist"> </Table> <原创 2020-10-15 14:57:17 · 614 阅读 · 2 评论 -
vue-router TypeError: Cannot read property ‘$createElement‘ of undefined
路由不跳转,还报错,router 文件夹下的 index.js 代码如下:错误的原因是把 component 写成了 componentsimport manage from '../views/manage/manage.vue'import testManage from "../views/manage/StudentManage/testManage"; const routes = [ { path: '/', name: 'manage', compone.原创 2020-10-09 09:25:34 · 480 阅读 · 0 评论 -
JavaScript 如何获取数组的键/key?
实际开发中遇到问题,有一个数组,需要把它的key取出来并在下拉框中进行显示,但不知如何获取数组的 key?举个例子比如var array = [{ 0: ‘a’}, { 1: ‘b’ }, { 2: ‘c’ }]需要取出key,构成一个新的数组 [‘0’, ‘1’, ‘2’]搜了半天不知咋搞,最后得知 JavaScript 内置了方法:Object.keys(obj)这里把 obj 换成 array 问题即可解决:Object.keys(array),下拉框即可展示 0、1、2 三项...原创 2020-08-20 01:19:38 · 11491 阅读 · 2 评论 -
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘validate‘ of undefined“
背景:写了一天的 Bug…错误提示:“TypeError: Cannot read property ‘validate’ of undefined”我的错误是在点击确定按钮时产生,问题出在表单相关的代码上 <Form :rules="rulesModel1" :model="formModel1" :label-width="80" > <FormItem label="承办人" prop="undertaker">原创 2020-08-16 22:40:25 · 9393 阅读 · 1 评论 -
[Vue warn]: Invalid prop: type check failed for prop “value“. Expected String, Number, got Undefined
[Vue warn]: Invalid prop: type check failed for prop “value”. Expected String, Number, got Undefined这个错误如何解决呢?它没有提到具体是代码的哪一行出现了这个错误,只说了是哪一个 .vue 文件。经过检索发现这个错误的出现原因一般是组件绑定的值取不到,于是我在这个 .vue 文件中检查发现<Select v-model="statusModel" class="selectProblemsF..原创 2020-08-16 16:22:40 · 22284 阅读 · 0 评论