element
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
-
树形结构数据中提取每一个叶子节点的完整父子关系数据
一个典型的树形结构数据,比如element-tree:const JSONData = [ { id: 1001, label: "一级目录1", show: true, children: [ { id: 1008, label: "新目录1-1", show: true, children: [原创 2022-05-23 21:47:34 · 525 阅读 · 0 评论 -
Vue+Element实现左侧无限级菜单
NavItem.vue:<template> <div> <el-menu-item :index="basePath" v-if="!item.child"> <i class="el-icon-menu"></i> <span slot="title">{{item.name}}</span> </el-menu-item> <el-submen原创 2021-06-08 16:52:00 · 658 阅读 · 0 评论 -
vue element的单选框组模拟tabs使用echarts
<template> <el-card> <el-row> <el-col :span="12"> <el-radio-group v-model="chartComponents"> <el-radio-button label="lineChart">折线图</el-radio-button> .原创 2021-04-04 15:37:31 · 251 阅读 · 0 评论 -
vue element的tabs中使用echarts
tabs中使用echarts,除了第一个图表能默认显示外,当tabs切换的时候,第一个之后的可能就显示不了了,如何解决?<template> <div> <el-row> <el-col :span="24"> <el-card> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> .原创 2021-04-02 09:13:20 · 2112 阅读 · 0 评论 -
Vue+Element+Node.js+Mysql实现后端分页
table.vue:<template> <div> <el-card> <el-row :style="{marginBottom: '15px'}"> <el-col :span="24"> <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</原创 2021-03-21 21:53:50 · 1740 阅读 · 0 评论 -
Element-ui中的table相关操作
1、点击表格第一个复选框全选所有行:事件“select-all”:<template> <el-table :data="tableData" ref="multipleTable" style="width: 100%" @select-all="selectAllHandle" > </el-table></template><script> method原创 2020-07-18 22:56:07 · 819 阅读 · 0 评论 -
element-ui 自定义表单验证 , 但是不出现小红心解决方案
rules: { // name: [{ required: true, message: "请输入公司名称", trigger: "blur" }], name: [{ required: true, validator: validatePass, trigger: "blur" }], abbreviation: [ { required: true, message: "请输入公司简称", trigger: "blur" } .原创 2020-07-07 21:34:50 · 4102 阅读 · 0 评论 -
vue+element项目中对echarts图表随着浏览器窗口resize的处理
知识点:mixins、ref、$refs、$nextTick()准备工作:1、项目中安装echarts:cnpm i echarts -S2、在main.js中引入echarts:import echarts from 'echarts'Vue.prototype.$echarts = echarts实现方式:1、普通方式:实现该功能的单文件组件为:chart.vue<template> <el-row> <el-co原创 2020-05-24 10:22:49 · 1642 阅读 · 0 评论 -
Element获取table中选中的行
实验版本为:Element2.13.1‘’this.$refs.multipleTable.selection‘获取表格选中行信息 : <el-button type="primary" @click="getSelection">获取</el-button> <el-table :data="tableData" ref="multipleT...原创 2020-05-03 10:20:55 · 8246 阅读 · 3 评论 -
让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: <el-container> <el-header>Header</el-header> <el-container> <el-aside width="...原创 2020-04-19 11:22:17 · 11405 阅读 · 0 评论 -
Vue2.0 + Element-ui2实现分页
当我们向服务端请求大量数据的时候,并要在页面展示出来,怎么办?这个时候一定会用到分页。本次所使用的是vue2.0+element-ui2.12实现一个分页功能,element-ui这个组件特别丰富,它给我提供了很多Pagination分页方式,这里使用其中一个快速完成分页功能。最终效果展示:下面说说实现原理及附上完整的代码,包括服务端代码(python)。<templ...原创 2019-10-06 09:08:35 · 1220 阅读 · 0 评论 -
Vue+Element-ui实现左侧二级导航(只展开一个菜单、可根据路由高亮菜单项、刷新时可自动展开定位到当前路由)
这里使用的Element文档版本是2.8.2。路由文件index.js:import Vue from 'vue'import Router from 'vue-router'import Form from '@/components/Form'import Data from '@/components/Data'import Radio from '@/components...原创 2019-05-21 22:32:08 · 6318 阅读 · 0 评论