
Element UI
尔嵘
愿你阳光下像个孩子,风雨里像个大人。
展开
-
html使用ElementUI表格筛选组件
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, m.原创 2022-01-04 18:15:11 · 1367 阅读 · 9 评论 -
vue+echarts中利用el-button实现画面和表格的切换展示
目标需求:我既要看表格数据,也要看对应的曲线效果:(1) (2)代码:js如下 data() { return { buttonList: "primary",//默认显示表格 buttonChart: "",//默认图形不显示 legendData: ['正向有功实时需量','反向有功实时需量','正向无功实时需量','反向无功实时需量'], tableData: [], ...原创 2020-12-24 14:24:23 · 2354 阅读 · 2 评论 -
vue+elementUI实现日期选择器的上一日、下一日按钮
el-date-picker中我想额外实现点击上一日按钮、下一日按钮显示对应的日期。这里面需要借助时间戳转换(先转换成时间戳,再讲时间戳转化成具体时间,然后截取日期)。代码template: <el-form :inline="true" :model="dataForm" @submit.native.prevent> <el-form-item label="日期:"> &原创 2020-11-17 15:50:40 · 2323 阅读 · 2 评论 -
el-table中根据el-select动态的插入列
前言:vue+elementUI项目中,经常会遇到报表的统计,表头并不固定,而是根据某些变量动态的生成的。那么该如何做成我们想要的样子呢?正文:<template> <section> <el-container style="border: 1px solid #CCC;border-radius: 5px;background-color: #ffffff;"> <el-main id="containerMain">原创 2020-07-29 15:32:02 · 1345 阅读 · 4 评论 -
vue+elemnt细节整理篇(遇坑总结)
1.首先我们要谈的是el-table和slot-scope="scope"<el-table :data="dataList" border @row-click="handleRow" style="width: 100%;"> <el-table-column prop="plantname" label="站点名称" header-align="center" align="center" :show-overflow-tooltip="true"></el-ta原创 2020-07-24 10:14:49 · 337 阅读 · 0 评论 -
vue+element进行普通布局
注意:element有的标签套用会有影响的。比如el-header里面的el-form-item的label对不齐!<template> <section> <el-container style="border: 1px solid #CCC;border-radius: 5px;background-color: #ffffff;"> <el-aside style="background-color: #FFFFFF;border原创 2020-06-24 13:48:01 · 1002 阅读 · 0 评论 -
ElementUi源码修改之transfer修改的爬坑之旅
前端永远是根据老板需求的变化而进行升级改进,存在必定合理。产品经理眼里能够见到你没有见过的,所以新的需求在你这是新奇。就好比说,产品让你用element然后又跟你说我不想让他这样出现,你说你改不改源码?源码初始效果如下:源码中不管你选中添加进右边的是谁,总是按照左边的排列顺序添加的,而我要改的需求是:不管我选中的顺序如何,我要按照我选中添加的顺序走,即取消组件的默认排序。源码如下:...原创 2019-12-20 11:37:19 · 2628 阅读 · 2 评论 -
vue+Element做表格的批量增加
全部代码如下:<template> <div> <el-button @click="addAll">批量增加</el-button> <el-table :data="tabledatas" border> <el-table-column label="title" align="center...原创 2019-09-06 14:12:13 · 4272 阅读 · 0 评论 -
使用VUE和Element 创建一个dialog对话框组件的详细过程
一、子组件(对话框):效果如下图:代码如下:<template> <el-dialog title="标题名" :visible.sync="changOrder" :before-close="handleClose" :close-on-click-modal="false"> <el-form label-widt...原创 2019-09-05 12:04:52 · 4617 阅读 · 0 评论 -
关于element ui 中部分组件的使用
在Element UI中可以发现很多小组件,但是实际用到的时候有时候哪个属性并不是很清楚,这就需要在实践中去总结。1.对话框<el-dialog title="忘记密码" :visible.sync="centerDialogVisibleSecond" width="30%" :before-...原创 2019-08-31 11:36:03 · 1658 阅读 · 0 评论