随笔分类 -  Vue

ElementUI中el-tree控件封装公共控件(部门列表)并请求后台数据获取父子级数据并构建成前端数据结构数据
摘要:场景 在人员管理系统中,有不少页面需要选择目前的部门树形结构中的部门进而作为筛选条件进行查询。 怎样借助ElementUI的el-tree控件封装成公共控件并请求SpringBoot后台数据获取部门数据并封装成前端需要的树形结构数据。 注: 博客: https://blog.csdn.net/bad 阅读全文
posted @ 2020-08-07 15:09 霸道流氓 阅读(2012) 评论(0) 推荐(0)
ElemrntUI中Transfer穿梭框的使用、赋值取值进而实现新增和编辑功能
摘要:场景 要实现的效果如下 这里用到了ElemrntUI的Transfer穿梭框控件 官方示例代码 <template> <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p> <div style="te 阅读全文
posted @ 2020-08-07 10:59 霸道流氓 阅读(3120) 评论(0) 推荐(0)
EleemntUI中el-table的formatter格式化字典显示的使用
摘要:场景 某些类似于用字典(键值对)存储的属性,比如操作员这种 1代表用户id 数组库存储的也是用户id,但是在页面上展示的是用户姓名 数据库中存储czy是数字即用户的id 而要在页面上展示的是用户姓名 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关 阅读全文
posted @ 2020-08-07 09:01 霸道流氓 阅读(3718) 评论(0) 推荐(0)
ElementUI中el-sellect请求springboot后台数据显示下拉项并在el-table中格式化显示
摘要:场景 Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统。 将表格中某字段类似于状态等需要关联字典表进行筛选查询时。示例如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子 阅读全文
posted @ 2020-08-06 17:55 霸道流氓 阅读(1931) 评论(0) 推荐(0)
ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值
摘要:场景 要实现的效果如下 官方示例代码实现多选 为el-select设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组。 默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。 <template> <el-sele 阅读全文
posted @ 2020-08-06 14:36 霸道流氓 阅读(18574) 评论(0) 推荐(0)
ElementUI中的el-table怎样实现每一列显示的是控件并能动态实现双向数据绑定
摘要:场景 要实现在ElementUI的表格中每一列展示的不是数据而是控件。效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 普通表格官方示例代码 <template> <e 阅读全文
posted @ 2020-08-06 13:50 霸道流氓 阅读(3434) 评论(0) 推荐(0)
ElementUI中的el-table怎样实现绑定对象数组时每一列不同控件的动态数据绑定
摘要:场景 ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行: https://mp.csdn.net/console/editor/html/107815187 上面实现的效果如下 其中每一行都是动态添加的,每一行对应的是一个对象,每一列对应的是一个对象的属性。 所以整个e 阅读全文
posted @ 2020-08-05 16:27 霸道流氓 阅读(7804) 评论(0) 推荐(0)
ElementUI中的el-table实现递增的序号列
摘要:场景 ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行: https://mp.csdn.net/console/editor/html/107815187 在上面中能实现动态添加一行并实现序号递增的效果。 这里记录下递增序号是怎样实现的。 注: 博客: https:/ 阅读全文
posted @ 2020-08-05 15:05 霸道流氓 阅读(4784) 评论(1) 推荐(0)
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行
摘要:场景 效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList, 并且通过 <el-tabl 阅读全文
posted @ 2020-08-05 14:54 霸道流氓 阅读(30768) 评论(4) 推荐(2)
ElementUI中的el-table实现多选框不勾选的提示
摘要:场景 ElementUI中的el-table怎样实现多选与单选: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107769640 在上面实现多选和单选的基础上,实现如果不勾选就点击某按钮时给予提示。 注: 博客: https:/ 阅读全文
posted @ 2020-08-04 11:23 霸道流氓 阅读(2247) 评论(0) 推荐(0)
ElementUI中的el-table怎样实现多选与单选
摘要:场景 实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可。 多选效果 单选效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实 阅读全文
posted @ 2020-08-03 17:40 霸道流氓 阅读(17045) 评论(2) 推荐(4)
ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储
摘要:场景 前端需要获取24小时制的时间参数并传递到后台存储到数据库。 在数据库中存储的是 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先前端使用ElemetUI的el-tim 阅读全文
posted @ 2020-07-30 17:49 霸道流氓 阅读(2094) 评论(0) 推荐(0)
Vue中实现清空数组和清空el-table
摘要:场景 要实现的效果是 那么就要用到怎样将这个el-table清空,即在vue中怎样将数组清空。 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先将这个el-table与一个 阅读全文
posted @ 2020-07-30 17:45 霸道流氓 阅读(26842) 评论(0) 推荐(1)
Vue中foreach数组与js中遍历数组的写法
摘要:场景 Vue中使用Axios发送get或者post请求,发送请求时需要在js中 对请求参数进行遍历并处理。 接收响应时需要对响应结果进行遍历和处理。 注意区分在vue和js中foreach数组的区别。 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 阅读全文
posted @ 2020-07-30 16:46 霸道流氓 阅读(10667) 评论(0) 推荐(0)
ElementUI中显示是否以及SpringBoot中怎样存储实体类属性和数据库怎样设计字段
摘要:场景 Vue+ElementUI+SpringBoot+Mysql 需要设计一些属性为是否,即只有两个选择的属性字段。 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先设计 阅读全文
posted @ 2020-07-30 10:20 霸道流氓 阅读(321) 评论(0) 推荐(0)
ElementUI中的el-form怎样格式化显示1和0为是和否
摘要:场景 某些字段代表是否怎样。 数据库中存储的是int型的1和0。 从数据中取出来的也是1和0。 怎样将其格式化为是和否 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 <el- 阅读全文
posted @ 2020-07-30 09:42 霸道流氓 阅读(2161) 评论(0) 推荐(0)
Vue中通过Axios向SpringBoot发送get和post请求
摘要:场景 前端使用Vue+ElementUI实现页面布局。 跨域请求使用axios。 为了将axios的请求对象封装成公共的。新建request.js import axios from 'axios' import { Notification, MessageBox, Message } from 阅读全文
posted @ 2020-07-30 09:30 霸道流氓 阅读(2781) 评论(0) 推荐(0)
ElementUI的el-form怎样格式化布局
摘要:场景 如果使用el-form默认的布局代码如下: <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item 阅读全文
posted @ 2020-07-30 08:51 霸道流氓 阅读(9519) 评论(3) 推荐(0)
ElementUI的el-table怎样隐藏某一列
摘要:场景 使用el-table进行数据的展示时,某些列不需要展示,但是需要其存在。 比如查询数据时要获取对象的ID属性,在展示时不需要展示ID这一列, 但是在进行编辑时需要获取该ID。 注: 博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获 阅读全文
posted @ 2020-07-29 17:48 霸道流氓 阅读(26865) 评论(0) 推荐(2)
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
摘要:场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码。 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 阅读全文
posted @ 2020-07-14 11:36 霸道流氓 阅读(5467) 评论(0) 推荐(0)