HowYouth的博客

前言在此之前，已经实现了vue+ElementUI的跨域查询并渲染查询结果的功能，现在想要在每一行中添加修改和删除的按钮。于是乎就需要获取当前行的数据，于是就有了下面两种方式的获取。1 获取当前行的数据1.1 我的笨办法这里是我记录自己的学习过程，这个方法也能实现，但是麻烦，如果您只是为了寻找最终方案，请直接查看1.2章节。首先我查看了官方文档，打算使用对话框来渲染修改页面和删除警告页面...

前言最近在练习VUE+ElmentUI的前后端分离，在向后台请求数据的时候，发生了跨域请求的问题，网上搜了好多方法，也不知道怎么处理。最后还是在后台代码中添加了跨域的响应头猜得以解决。后台实现在拦截器中添加header:public class LoginInterceptor implements HandlerInterceptor { private static Logger l...

前言在之前的获取当前行数据中，最终的方案是使用了slot-scope="scope"的方式获取了当前行的数据，当时对slot-scope是个什么东东不了解。这两天查看了好多资料，有点明白了这个插槽是个什么东西。但是理解的不深，可能有错，先记下来，就当是整理一下思路。什么是插槽Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将&lt...

VUE+ElementUI的登录页面

前言在项目中，左侧菜单点击后，会在右侧新建一个tabs标签页。创建标签页是一个公共方法，参数是菜单node信息，不方便增加参数。但我需要在创建tabs时还要带上一点别的信息，简单来说，就是我要查看详情，除了新建一个查看详情的tabs之外，我还需要带着数据进入新的tabs中。我试了使用$emit和$on进行监听，发现当$emit组件已经触发事件后，需要$on监听的组件还没有create好，导致无...

前言去后台查询，结果是一个List，可以很容易地自己组装出数组。然后再使用数组转为Tree。代码//此处省略list转数组的方法optionData(data) { console.log('开始转换为树形数据'); let cloneData = JSON.parse(JSON.stringify(data)); // 对源数据深度克隆 return cloneD...

前言最近项目采用了ElementUI作为前端框架，除了IE打不开之外，Chrome浏览器中如果进行页面的缩放，table组件的border会显示错位；其他浏览器正常。处理方法在App.vue中添加样式： //修复谷歌浏览器下table组件border错位问题 body .el-table th.gutter{ display: table-cell!impor...

前言项目中有些下拉框的数据需要使用树形结构，但是ElementUI中并没有提供相关功能，如果使用级联选择器，又会显得页面臃肿庞大，极不美观。项目中大佬提供了一个树状下拉框的组件，将代码记下来。代码<!-- 树状选择器 --><template> <el-popover ref="popover" placement="bottom-start" tri...

前言项目中在进行新增数据的时候，新增数据中有一个参数需要以table的形式存贮，且需要支持新增多行数据，还要对每一行的数据进行校验。本篇博文即为记录这一功能的实现。代码话不多说，先上代码（我这里的代码是一个组件，具体的读者可以根据实际情况自行修改）：<template> <el-dialog :visible.sync="showMe" :close-on-cli...