随笔分类 - Vue
ElementUI中使用el-calendar实现基于日历的节假日的增删改查
摘要：场景 前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查。 主页面显示效果如下 点击日历组件上的某天进行新增节假日时 点击已经存在的节假日编辑时 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取
阅读全文
ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容
摘要：场景 前端进行导入Excel后，后台SpringBoot将导入结果进行反馈。 后台代码使用的是StringBuilder拼接一个带换行\n的回显内容。 然后在导入结束后前端怎样使用ElementUI的弹窗将反馈结果包括换行原样显示。 注： 博客： https://blog.csdn.net/bada
阅读全文
ElementUI中对el-table的某一列的时间进行格式化
摘要：场景 前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式，如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办。 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免
阅读全文
Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果
摘要：场景 如果一个状态量在多个地方用到，或者一个业务用到多个状态量。 可以使用类似枚举类代替直接使用明文表示。 这样如果需要修改状态量的值就不用再每个地方都要修改。 Vue中要实现同样的效果，比如自定义一些错误码。 即401代表什么，403代表什么，默认的错误码返回什么。 注： 博客： https://
阅读全文
Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中
摘要：场景 使用vue实现一个登录页面时，实现记住密码功能。 在勾选了记住密码后将密码存储到Cookie中，然后下次直接从Cookie中取。 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
阅读全文
Vue中前端加密使用RSA加密下的JSEncrypt防止明文暴露
摘要：场景 前端使用Vue在进行登录时，需要将密码存进cookie中。 为了防止密码明文暴露，前端需要采用加密方式对密码进行加密。 常用加密方式之一就是RSA加密解密。 RSA加密是一种非对称加密。可以在不直接传递密钥的情况下，完成解密。这能够确保信息的安全性，避免了直接传递密钥所造成的被破解的风险。是由
阅读全文
ElementUI中el-form实现表单重置以及将方法抽出为全局方法
摘要：场景 使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。 那么el-form怎样实现表单重置，如果在多个页面需要用到重置，怎样将此方法抽出为全局的方法，在需要用到的地方直接引用。 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注
阅读全文
ElementUI中el-time-picker实现选择时间并格式化显示和传参的格式
摘要：场景 要实现在前端选择一个一天中的时间并传递到后端。 实现效果如下 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 <el-form-item label="打卡时间" pro
阅读全文
ElementUI中el-table-column的type为selection时选择框旁边有个点
摘要：场景 使用el-table的多选框时，el-table-column的type为selection时，显示为勾选框。 但是会在勾选框旁边显示一个实心的小点。 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书
阅读全文
ElementUI中el-table设置指定列固定不动,不受滚动条影响
摘要：场景 使用el-table显示人员信息时，如果要显示的人员信息列比较多，就会出现滚定条。 如果希望前面指定的像工号、姓名等字段不用显示的话，可以设置指定列固定不动。 实现效果如下 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序
阅读全文
ElementUI中el-table添加小计行之后调整在滚动条上方
摘要：场景 找到要添加汇总行小计行的el-table <el-table v-loading="loading" :data="kqtjList" show-summary="true"> 设置shoe-summary为true 但是如果列比较多有滚动条出现的话就会出现上面那种合计行在滚动条 注： 博客：
阅读全文
ElementUI中el-table在表格最下方添加一列汇总小计行
摘要：场景 el-table中的每列显示的是数字，需要在表格的最下面一行添加汇总行，计算每列的总和。 el-table自带是否显示汇总行这个属性。 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费
阅读全文
Vue中使用v-for实现一对多数据的2层和3层嵌套循环
摘要：场景 业务场景中常有一对多的情况。 后端在给前端返回数据时是一个对象的list，为每个对象的有一个属性 是多的那个的对象的list。 比如后台给前端返回的数据示例如下 那么在Vue中怎样将这个一对多的数据循环都显示出来。 注： 博客：https://blog.csdn.net/badao_liuma
阅读全文
ElementUI中el-checkbox-group多选框组的使用，怎样设置一组选项与获取所选值
摘要：场景 最终实现的效果 checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮
阅读全文
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode Debug for Chrome 插件)
摘要：场景 在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点，然后逐步或者逐过程进行调试。 但是在Vue中如果想要进行调试时，如果是在js中调试的话，可以直接添加一个debugger，然后在浏览器中打开检查进行断点调试。 但是如果在vue界面的话则没法逐步查看变量的值。 比如
阅读全文
ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据
摘要：场景 结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。 官方示例代码
阅读全文
ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏
摘要：场景 在el-select的下拉框中，下拉选择指定的下拉项时才会显示后面的单选框，否则不显示。 效果如下 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先在页面中添加这两个
阅读全文
EelemntUI中e-form表单校验的使用以及表单校验的规则
摘要：场景 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 官方示例代码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
阅读全文
ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息
摘要：场景 双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息。 效果如下 注： 博客： https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先给el-table设置cel
阅读全文
ElementUI中的el-select中多选回显数据后没法重新选择和更改
摘要：场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848 上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回
阅读全文
浙公网安备 33010602011771号