Mr_Chp的博客

VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能文章目录背景实现思路背景ElementUI官方提供了el-table的树形结构展示方式。通常使用树形结构时，会需要“全部展开”和“全部收回”的按钮功能，便于我们能够方便对数据表格的操作。比如下图的实现效果：实现思路官方文档中给出了表格级别的方法，在Table Methods中，可以找到 toggleRowExpansion 方法，其具体含义参见官网释义。该方法可以实现表格中某一行的展开或者收缩功能，那么我们.

Vue实现div滚动条到底部加载更多文章原文：https://www.cnblogs.com/hb88/p/13749143.html<div ref="box"><!-- 这里面是内容 --></div>mounted() { let box = this.$refs.box; box.addEventListener('scroll',this.handleScroll,true); },methods: { handleS.

原文章：vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题以及解决方案在开发中，难免会遇上各种问题，今天讲解一下，在vue项目中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。解决方法：1：监听地址栏变化（watch）,这是vue-router官方给出的解决办法。监听路由变化，把.

vue富文本编辑器vue富文本编辑器Vue-Quill-Editor主流富文本编辑器对比前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。UEditor（百度）优势：插件多，基本曼度各种需求，由百度web前端.

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。富文本自定义滚动条<Display v-model="row.content" />为vue项目中写的富文本组件<el-table-column label="内容" align="center" prop="content" width="755" :show-overflow-tooltip="true"> <template slot-s

文章借鉴场景描述：三级路由覆盖二级路由页面，在一级路由页面（主页面显示），并且动态生成面包屑问题一：如何让三级路由内容显示显示在一级路由页面可以说是我点级二级路由导航的时候是不发生跳转的，但还要去动态的生成面包屑利用中间件, 创建一个新vue页面，<template> <router-view></router-view></template><script> export default { name: "publ

消息弹窗不重复弹出，只弹出一次文章借鉴：让ElementUI Message消息提示每次只弹出一次1、在utils里新建一个message.js 文件/** * 重置message，防止重复点击重复弹出message弹框 * 用法: * main.js挂载：Vue.prototype.$messageSingle = message.success; * ———— this.$messageSingle.info("操作失败"); 或者 this.$messageSingle.info(

vue 引用自定义eof、otf、在线字体的方法1.放到项目的 assets 目录中2. 引入字体文件首先创建一个 font.css 文件，引入字体。/*电子LED字体 边框略微圆一点*/@font-face { font-family: 'UnidreamLED'; src:url(UnidreamLED.eot); /***兼容ie9***/ src:url(UnidreamLED.eot?#iefix)format('embedded-opentype'), /

import Vue from 'vue';/* * 定义公共js里，在入口文件main.js中import； * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 */// v-dialogDrag: 弹窗拖拽+水平方向伸缩Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400;

文章借鉴：WebKoalaBoy效果创建js文件 utils/dialogdrag.jsimport Vue from 'vue'Vue.directive('el-drag-dialog', { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 820; let minHeight = 460; //初始非全屏 let isFullScreen = false; .

文章转载：一种风度基于el-dialog， 封装了一下。大概粘了一下效果组件使用<el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isfullscreen" :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="fa.

1、在 utils 中新建 directives.js 文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog