草庐IT

Elementui

全部标签

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板

DataGear数据可视化看板内置了一些基本、简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架。本文以Vue2、ElementUI前端框架为例,介绍如何制作具有更丰富交互组件功能的数据可视化看板。假设有数据库表t_region_date_value,数据结构为:col_name,col_date,col_value地区一,2022-01-01,30地区一,2022-01-02,90地区一,2022-01-03,50...地区二,2022-01-01,20地区二,2022-01-02,30地区二,2022-01-03,60...地区三,2022-01-01,80地

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板

DataGear数据可视化看板内置了一些基本、简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架。本文以Vue2、ElementUI前端框架为例,介绍如何制作具有更丰富交互组件功能的数据可视化看板。假设有数据库表t_region_date_value,数据结构为:col_name,col_date,col_value地区一,2022-01-01,30地区一,2022-01-02,90地区一,2022-01-03,50...地区二,2022-01-01,20地区二,2022-01-02,30地区二,2022-01-03,60...地区三,2022-01-01,80地

【vue2】使用elementUI进行表单验证实操(附源码)

🥳博       主:初映CY的前说(前端领域)🌞个人信条:想要变成得到,中间还有做到!🤘本文核心:vue使用elementUI进行表单验证实操(附源码)【前言】我们在构建一个项目中,基本是无法避免不使用表单来收集数据的。比如登录注册页面,我们需要验证输入者的用户名与密码当都具有合法性与正确性的时候我们才可以进行注册以及登录的操作。当登录进页面之后,还会涉及到数据的增删改查操作,这都无一例外需要我们通过某一个载体来接收我们的数值,因此表单在项目中是很常见的,大家物必得学会呦。目录一、表单校验流程发请求流程二、使用elementUI框架进行表单校验一、表单校验流程发请求流程收集数据、进行验证、处

【vue2】使用elementUI进行表单验证实操(附源码)

🥳博       主:初映CY的前说(前端领域)🌞个人信条:想要变成得到,中间还有做到!🤘本文核心:vue使用elementUI进行表单验证实操(附源码)【前言】我们在构建一个项目中,基本是无法避免不使用表单来收集数据的。比如登录注册页面,我们需要验证输入者的用户名与密码当都具有合法性与正确性的时候我们才可以进行注册以及登录的操作。当登录进页面之后,还会涉及到数据的增删改查操作,这都无一例外需要我们通过某一个载体来接收我们的数值,因此表单在项目中是很常见的,大家物必得学会呦。目录一、表单校验流程发请求流程二、使用elementUI框架进行表单校验一、表单校验流程发请求流程收集数据、进行验证、处

VUE element ui 动态合并单元格问题

**VUEelementui动态合并单元格问题**1.基础方法//最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下://效果//绑定:span-method=“arraySpanMethod”el-table:data="tableData":span-method="arraySpanMethod"style="width:100%"class="monOrdUpTable":header-cell-style="{background:'rgb(243,243,243)',color:'rgb(55,54,54)',}"border:height="tab

VUE element ui 动态合并单元格问题

**VUEelementui动态合并单元格问题**1.基础方法//最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下://效果//绑定:span-method=“arraySpanMethod”el-table:data="tableData":span-method="arraySpanMethod"style="width:100%"class="monOrdUpTable":header-cell-style="{background:'rgb(243,243,243)',color:'rgb(55,54,54)',}"border:height="tab

element ui el-table表格宽度根据元素宽度自适应

需求要将元素全部展示,用户自己拖动滚动条来查看元素。第一步设置表格内的元素不会自动隐藏,本人用的SCSS,使用样式穿透达到这一效果.table::v-deep.el-table.cell{white-space:nowrap;text-overflow:unset;}初始html,将fit设置为false,使伸缩窗口大小不会改变tablejs代码如下,模拟调用接口created(){this.getData()},methods:{getData(){setTimeout(()=>{this.tableData.push({month:'2022-05',date:'2022-05-18',c

element ui el-table表格宽度根据元素宽度自适应

需求要将元素全部展示,用户自己拖动滚动条来查看元素。第一步设置表格内的元素不会自动隐藏,本人用的SCSS,使用样式穿透达到这一效果.table::v-deep.el-table.cell{white-space:nowrap;text-overflow:unset;}初始html,将fit设置为false,使伸缩窗口大小不会改变tablejs代码如下,模拟调用接口created(){this.getData()},methods:{getData(){setTimeout(()=>{this.tableData.push({month:'2022-05',date:'2022-05-18',c

解决element-plus使用图标不显示问题

关于前端使用element-plus中的icon不展示,网上主要分为两种,一种是打包之后不展示,还有一种是直接在开发的时候运行就不展示这个帖子主要解决的是在本地运行图标不展示的问题关于不展示的原因,简单一句话就是:element-plus/icons改变成了svg怎么解决呢?前提:先确定安装了element-plus/icons,没安装的话,安装命令奉上npminstall@element-plus/icons-vue如果图标引用的比较少,那么采用方案1,如果大量的使用了图标,就采用方案2方案1:在引用图标的页面中将要使用的图标引入,作为js对象,代码如下:script> import{Edi

解决element-plus使用图标不显示问题

关于前端使用element-plus中的icon不展示,网上主要分为两种,一种是打包之后不展示,还有一种是直接在开发的时候运行就不展示这个帖子主要解决的是在本地运行图标不展示的问题关于不展示的原因,简单一句话就是:element-plus/icons改变成了svg怎么解决呢?前提:先确定安装了element-plus/icons,没安装的话,安装命令奉上npminstall@element-plus/icons-vue如果图标引用的比较少,那么采用方案1,如果大量的使用了图标,就采用方案2方案1:在引用图标的页面中将要使用的图标引入,作为js对象,代码如下:script> import{Edi