前端
文章平均质量分 66
灵活的小胖zhi
这个作者很懒,什么都没留下…
展开
-
Element Table实现用户自定义列
需求:文件列表用户自定义基础:之前已经实现了文件列表的功能,但是是固定表头的列表期初,我们是根据用户提出的要求展示相应的列,没有做过多的考虑,因此,我们当时直接固定了列名。这样做其实大大限制了程序的可扩展性,如果用户使用过程中发现我需要的没有这么多列或者我想要更多的列的时候怎么办?只能改代码,严重违反了软件设计的开放封闭的原则,因此,在功能设计的时候要考虑的全面一点,不能不听用户的,但是也不能全听用户的,要有全局观。基础代码实现:当el-table元素中注入data对象数组后,在el-tab原创 2021-09-18 11:49:50 · 8131 阅读 · 1 评论 -
v-if VS v-show
先上结论------相同点:视觉效果:一样指令的作用:根据表达式的真假值切换元素的显示状态语法表达式类似:v-if/show="表达式"指令后面的"表达式"最终会被解析为布尔值,值为真(true)的时候元素显示,值为假(false)的时候元素不显示不同点:显示隐藏:v-if显示隐藏是将dom元素整个销毁和重建;而v-show隐藏则是为该元素添加css--display:none,dom元素还在。性能消耗及使用场景:v-if操作dom元素,有更高的切换消耗,适用于不太.原创 2021-09-17 15:41:44 · 174 阅读 · 0 评论 -
【el-tree】树形结构拖拽
之前做项目有遇到过使用el-tree的,但是树形结构拖拽还是第一次遇到,开始觉得会好难(心里暗示),因为考虑到好多种情况,做完之后其实还好,在此记录一下~首先,树形结构的拖拽--- <el-tree v-model="filterText"//过滤 class="tree" :data="projectNameOptions" node-key="id" :props="chapterProps" default-expa原创 2021-09-15 21:01:41 · 5155 阅读 · 1 评论 -
【el-tree】树形结构存储
最近,做项目中用到了element提供的tree形控件。首先,el-tree所展示的树形结构是什么样的呢?接下来,要展示这样的属性结构需要什么样的数据格式呢?一个json串:[{ id: 1, label: '一级 1’, children: [{ id: 4, label: '二级 1-1’, children: [{ id: 9, .原创 2021-08-27 21:14:55 · 1324 阅读 · 2 评论 -
vue <style>标签的scoped 属性
大家都知道<style> 标签是用来设置浏览器中如何呈现HTML的,也就是设置CSS样式的,但是当我们在<style>标签里加上scope的是什么意思呢?"scoped" 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。<style> 标签有 scoped 属性时表示它的样式作用于当...原创 2021-08-08 15:55:24 · 956 阅读 · 0 评论 -
【前端】监听页面切换--浏览器页面间切换,路由切换,导航守卫页面刷新或关闭
前提,PC端应用一,监听浏览器页面间切换场景:浏览器某一个页面A,PC端页面B,页面AB间切换方案:1.使用vue-visibility-change安装:npm i vue-visibility-change -S2.导入main.jsimport visibility from 'vue-visibility-change';Vue.use(visibility);3.使用i,全局使用:main.jsvisibility.change((evt,原创 2021-07-31 21:53:31 · 3099 阅读 · 0 评论 -
分页--前后端联调
前面,我们写了element Table+Pagination实现分页https://blog.csdn.net/hejingfang123/article/details/118875170,但是,只是静态页面,后面,我们写了真分页后端实现--Mybatishttps://blog.csdn.net/hejingfang123?spm=1001.2101.3001.5343,接下来,轮到前后端联调了---<script>export default { data() { r原创 2021-07-30 21:03:16 · 338 阅读 · 1 评论 -
element Table+Pagination实现分页
最近做项目时,有一个新需求:做一个列表展示,并且用上分页。项目背景:前端框架是vue,我们的项目是电脑端,因此我们选择了element组件库做一个列表展示,我们首先可以想到element的Table表格首先,使用一个别人封装好的组件,基础的一定是最精华的,最基础的,我们想使用这个组件,最基础的的一定要有Table组件表头:<template> <el-table :data="tableData" style="width: 100%原创 2021-07-18 11:47:56 · 985 阅读 · 1 评论 -
【批量导入前端实现】-element upload使用
最近,项目中有一个新需求是批量导入功能,我负责前端。首先,element提供了封装好的upload组件,我们只需要根据我们的实际需求进行调整就好。下面,原创 2021-06-04 00:09:30 · 1241 阅读 · 1 评论 -
Excel批量导入树形结构模板设计-征集广大网友
最近,做项目的时候,有一个需求,Excel批量导入树形结构功能,导入树形结构如何理解呢?就是要体现出父子关系,如果对于数据库来说,可以理解成pid如果只是简单的批量导入听起来感觉还是蛮简单的,但是加上了一个树形结构,还是有些些复杂的先介绍一下数据库需要存储的主要字段为计划名称,...原创 2021-06-02 12:08:52 · 1623 阅读 · 1 评论 -
查询组织架构业务梳理
1.如何判断节点有children属性js属性对象的hasOwnProperty方法Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。原创 2021-05-03 09:22:39 · 228 阅读 · 1 评论 -
package.json,package_lock.json与node_moule
最近做前端的时候,不小心把package_lock.json文件提交了,在发merge请求的时候被打回来了,备注中提到了让我查一下package_lock.json是干嘛的,到底需不需要提交。好,那接下来让我们研究一下吧!package.json:提到package_lock.json不得不提到package.json,比如说,我们用vue框架搭建一个前端项目(搭建步骤请参考:https://blog.csdn.net/hejingfang123/article/details/10953493原创 2021-02-23 21:34:30 · 716 阅读 · 0 评论 -
vue框架目录结构(全)
使用vue init webpack 项目名称命令创建的vue-cli2的项目目录 目录说明:bulid:项目构建相关代码config:配置目录,包括端口号等node_modules:npm加载的依赖模块src:我们要开发的目录,基本上要做的事情都在这个目录里。里面包括几个目录及文件: assets:放置一些图片 components:组件文件,可以不用 router:配置路由跳转 views:存放页面 App.vue:...原创 2020-11-09 17:12:17 · 2686 阅读 · 2 评论 -
vue框架搭建步骤详解
首先,安装node.js各种版本的node.js:https://nodejs.org/en/download/releases/解释: 百度百科:Node.js 是一个基于 Chrome V8 引擎的JavaScript运行环境,即JavaScript的运行环境 举一反三:JDK(包括JRE)或JRE是java的运行环境,我们想要运行java程序首先需要有java的运行环境。 说明:新版的Node.js已自带npm,安装Node.js时会一起安装,np...原创 2020-11-06 17:57:02 · 3734 阅读 · 1 评论