HZM_CSDN的博客

原创 elementUI-Tablede 的 Selectable属性用法与案例

个人理解: 就是在 标签内动态绑定即可,再methods里面去根据条件判断就行。

原创 el-aside 侧边栏折叠效果

需求如图: 折叠后: 实现代码:

原创 vue + el-checkbox 单选功能

需求: 用 el-checkboc 实现单选功能并且当选中某一项时则回填到input框里,当点击 enter 键或者是 按下搜索图标按键,来实现页面搜索内容的同步展示;

原创 vue + el-table 对表头每个字段进行操作

【代码】vue + el-table 对表头每个字段进行操作。

原创 el-button 里的 slot用法

el-button slot="append"> 里的 slot="append" 就是一个UI摆放的位置,其实就是封装的样式布局。prepend：代表放在紧贴在依赖组件的前面。append：代表放在紧贴在依赖组件的后面。

原创 通过el-scrollbar 在弹框内添加滚动效果(要求:去掉x, y 的滚条)

设计效果: 因为在历史记录弹框内展示数据量大, 所以需要做成滚动的效果,并且去掉显示的上下滚动条,如图:代码: 1.现在common.scss文件配置;

原创 el-dialog 里面的 table内容加滚动条

【代码】el-dialog 里面的 table内容加滚动条。

原创 vue - 封装方法 (去掉 对象中不需要的字段)

【代码】vue - 封装方法 (去掉 对象中不需要的字段)

原创 el-row 设置内容(按钮＞＞)的居中效果

看图说话:

原创 (2020.10.20) - 记录

【代码】(2020.10.20) - 记录。

原创 vue + elementUI 实现select即可输入值,也可选择已有项

根据业务经理的需求,效果如下图:代码如下:methods里定义方法,如图:

原创 el-input相关问题解决

但是有时候会同时触发刷新页面，这样可以在el-form上添加@submit.native.prevent来解决。2.使用回车键enter来进行登录，在登录按钮上面添加native-type=“submit”1.当只有一个el-input的时候，可以用elementUI的自带的回车键触发提交事件。vue+elementUI的el-form的回车键登录，监听键盘来触发事件。3.监听键盘来触发登录事件。...

转载 JS中监听键盘事件Unicode编码 -- Vue中监听键盘事件

InternetExplorer/Chrome浏览器使用event.keyCode取回被按下的字符，而Netscape/Firefox/Opera等浏览器使用event.which。原文链接https//blog.csdn.net/helloxiaoliang/article/details/72686648。键盘事件（KeyboardEvents）onkeydown获取用户按下的键。......

原创 el-select 动态回显每一个option

el-select 动态回显每一个option

翻译 window&Vue - 跳转页面总结

1、直接的事件跳转2、打开新页面跳转(带参)3、返回上一页4、关闭窗口直接关闭窗口1、标签跳转2、push replace方法3、返回上一页

原创 Json.stringify()和Json.parse() - 用法及区别

一.json.stringify()和json.parse()的用法和区别：两者区别：json.stringify()是把javascript对象转换成json字符串；json.parse()是把字符串转换成对象。简单来说两者的作用是相对的。1.json.stringify():(1) json.stringify()–把javascript对象转换成json字符串；(2) json.stringfy()–起到对参数序列化的作用。比如说：前端调用后台接口需要传参数，如果传递的参数是简单的字段可以不

原创 el-ement table 页面之间数据传递

el-ement 不同页面数据传递

原创 element-select 组件，选择一项，传多个值

el-select传值

原创 el-table表头文字换行

el-table表头文字换行

原创 el-table 分页一直累加效果

效果图：代码实现：<-- 分页累加效果 --><el-table-column type="index" :index="indexMethod" label="序号" width="40" align="center"></el-table-column> indexMethod(index) { index = index + 1 + (this.searchParam.pageNo - 1) * th

原创 Vue项目遇到的坑——map用法

对 v-model 的解析，通过绑定ID值来实现高亮效果

原创 Vue项目 代码优化的写法总结

Vue项目 代码优化的写法总结

原创 使用 Element 组件库所遇问题总结

1.表格字段过长省略　　elmentUI的table-column有提供属性 show-overflow-tooltip 只要在对应的字段上设置为true，则文本超出部分就会用省略号替代，并且鼠标移至其上时，可查看完整信息。2.如何获取行数据作为方法参数？　　如果要为表格的每一行都添加操作按钮，如删除。这些删除按钮绑定的是同一个方法，那么如何区分是谁调用的呢，答案就是在方法中传入参数，而这些参数就是在渲染的时候写死在@click的方法参数里面。获取本行数据的方法就是scope.row.xxx，其

原创 Vue后台项目中如何去除左侧菜单栏滚动条

看图便知 ：.el-aside { overflow-x: hidden; min-height: calc(100vh - 60px); background: linear-gradient(0deg, #0056ae 0%, #10385c 100%); position: fixed; top: 60px; left: 0; bottom: 0; z-index: 999; scrollbar-width: none; &::-webk.

原创 ant design 中 通过 menu 菜单控制不同内容页面展示

技术栈： ant design vue ；--- menu 菜单组件需求：通过点击侧边栏的不容标题，来实现内容页面的切换展示代码演示：为什么是showcontent[0] 的写法，因为@select事件打印的key值在数组里面，所以要选中它，就得找他的下标[0]...

原创 用&emsp； -- 空格符解决布局问题

在HTML中我们最常见的应该是&nbsp; ，但是对中文最有用的应该是&ensp;和&emsp;。下面我讲一下这三个的区别以及如何让中文对齐。&nbsp; （半角的不断行的空白格）这是我们使用最多的空格，也就是按下space键产生的空格。但是在HTML中，如果你用空格键敲出这个空格，空格是不会累加的（只算1个）。要使用html代码&nbsp;表示才可累加。这个空格占据的宽度受字体影响很明显。在inline-block布局中会搞些小破坏，在两端对齐布局中又是不可

原创 理解svg-icon的工作原理及使用步骤

理解svg-icon的工作原理### 目标理解svg-icon组件的工作原理； 如何把它用到新项目中？### 要点- svg-icon是一个全局组件，在`src/icons/index.js`中定义并注册成立全局组件。- 在main.js中引入了- 它额外需要[email protected]的配合，及对应的vue.config.js中的配置。- 它的使用格式`<svg-icon icon-class="文件名"/>` 。这里的文件名就是在src/icons/s

原创 学习 npm install -D -S 的区别

简单总结一下：devDependencies 的理解：我们在开发一个前端项目的时候，需要使用到webpack或者gulp来构建我们的开发和本地运行环境，这时我们就要安装到devDependencies 里。webpack或者gulp是用来打包压缩代码的工具，在项目实际运行的时候用不到，所以把webpack或者gulp放到devDependencies 中就行了。dependencies 的理解：我们在项目中用到了element-ui或者mint-ui，在生产环境中运行项目，当然也需要elem

原创 NVM -- nodejs包管理工具命令总结

命令提示说明nvm arch [32|64]：显示node是运行在32位还是64位。 nvm current： 显示活动版本。 nvm install <version> [arch]：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数。可以添加--insecure绕过- 远程服务器的SSL。 nvm list [available]：显示已安装的列表。可选参数available，显示可安装的所有版本。

原创 优化代码(定义接口index.js文件)

如图示:

原创 代码高亮的插件 - highlight.Js

原创 图片防盗链问题(403报错)

报错如图所示 :

原创 全局自定义指令---输入框自动获得焦点

原创 终端使用技巧总结

Windows 打开终端的方式cmd: 1.按 windows + R键; 打开运行界面; 输入cmd,回车 2.打开任意文件夹,在地址栏中输入cmd,回车(推存)powershell: 1.打开任意文件夹,按住shift不放,鼠标右键,选择"在此处打开powershell窗口" 2.使用Windows搜索.输入powershell,搜索git bash here 1.任意文件夹空白处,鼠标右键.选择 "Git Bash Here"常用命令:...

原创 对 promise 的理解

一句话 : Promise 是 ES6 提供的一种解决异步编程的方案,从而避免在JS中因为回调嵌套过多导致回调地狱形成的问题往往在面试中,关于 promise 的理解是经常会问到的,所以在此我来给大家做一个总结,供大家参考;建议大家结合自身项目工作经验可以考虑从以下几个点去回答1、Promise 是一个构造函数，我们可以通过该构造函数来生成Promise的实例。2、Promise 即承诺，后续必要兑现，一旦兑现则不可更改！其状态有三：pending（等待）、resolved（成功）..

原创 单页面应用及优缺点是什么？

单页面应用（SPA） ：通俗点说就是指 只有一个主页面的应用，浏览器一开始要加载所有必须的 html,css,js。所有的页面内容都包含在这个所谓的主页中。但是写的时候，还是会分开写（页面片段），然后在交互的时候由 路由动态载入，单页面的页面跳转，仅刷新局部资源。多应用于 PC 端。多页面应用 （MPA）：一个应用中有 多个页面，页面跳转的时候是 整页进行刷新。单页面（SPA）和多页面（MPA）的对比 ：组成 ： SPA 一个外壳页面和多个页面片段组成。MPA 多个完整页面构成...

原创 Object.keys()方法使用

Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致，如果对象的键-值都不可枚举，那么将返回由键组成的数组代码演示 :如果要在原生不支持的，旧环境中添加兼容的Object.keys，了解以下代码段：if (!Object.keys) { Object.keys = (function () { var hasOwnProperty = Object.prototype.hasOwn.

原创 Vue项目中,怎么实现组件异步加载?

1. 什么是异步组件？即只在组件需要渲染的时候进行加载渲染并缓存。2. 为什么需要异步加载组件？当项目功能越来越多，所包含的子组件也越来越多，导致页面加载，访问速度过慢，所以需要优化页面加载的性能。3. 异步加载组件方法可以使用懒加载，即 () => import ( 地址)关于路由懒加载：VUE：实现路由懒加载使用require...

原创 CSS面试题总结

1.CSS盒模型分为标准盒模型：box-sizing: content-box　　width和height为content的width和height　　元素的宽度等于width+margin+border+padding怪异盒模型(IE模型)：box-sizing:border-box　　width和height为除了margin的部分　　元素的宽度等于width在Web文档首部加了DOCTYPE声明，即使用标准盒模式，如果不加，则会由浏览器自己决定2.px、em、rem

原创 什么是BFC ?

什么是BFC？从字面理解 :BFC 全称为 块格式化上下文(Block Formatting Context) 。一起来看一下官方是怎么解释的MDN：一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。一个块格式化上下文由以下之一创建：根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 positio...