![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
UI框架
星期五の夜
stay hungry ... stay foolish ...
展开
-
element-ui部分表单组件的必填校验问题
element-ui必填校验原创 2022-08-29 09:45:37 · 2756 阅读 · 0 评论 -
vue+Echarts动态数据已经赋值,但是无法渲染页面的问题
vue+Echarts动态数据已经赋值,但是无法渲染页面的问题转载 2020-07-29 09:35:51 · 1237 阅读 · 0 评论 -
ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他区域会导致该对话框关闭。
ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他区域会导致该对话框关闭。转载 2020-07-03 13:51:02 · 3581 阅读 · 0 评论 -
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证转载 2020-06-21 18:00:11 · 577 阅读 · 0 评论 -
element-ui . el-select选择器选择不同的内容改变不同的div
选择器:<el-select v-model="period" placeholder="请选择活动区域" style="min-width:300px;"> <el-option v-for="item in attributeList" :key="item.type" :label="item.name"原创 2020-06-18 10:05:55 · 2235 阅读 · 0 评论 -
阻止冒泡element按钮点击操作阻止@row-click
阻止冒泡element按钮点击操作阻止@row-click转载 2020-06-18 10:02:05 · 2346 阅读 · 0 评论 -
elementui中el-table-column里显示两个后台字段
使用elementui组件库中的table表格组件标签时,要展示的数据来自后台返回的两个字段,用法如下:<el-table-column prop="specs,quantityUnit" label="规格"> <template slot-scope="scope"> {{scope.row.specs}}/{{scope.row.quantityUnit}} </template> </el-t原创 2020-06-18 09:56:15 · 5000 阅读 · 0 评论 -
element cell-click使用方法
<el-table width="100%" border :data="Datalist" @cell-click="handle" >methods: { handle(row,column,event,cell) { console.log(row) console.log(column) console.log(event) console.log(cell) }}原创 2020-06-18 09:54:22 · 26946 阅读 · 4 评论 -
el-cascader级联选择器省市区三级联动请求接口
转载 2020-06-18 09:51:28 · 1116 阅读 · 0 评论 -
el-tree的使用
<el-form-item label="功能权限"> <!-- show-checkbox 节点是否可被选择 默认false --> <!-- check-strictly 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false --> <!-- node-key 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 --> ...原创 2020-05-15 18:27:54 · 1368 阅读 · 0 评论 -
el-table树形结构的数据结构处理
效果:后台返回的数据结构递归成树形数据结构处理 getList() { this.loading = true const query = Object.assign({}, this.listQuery) for (const key in query) { if (!query[key]) { delete query[key] } } this.comApiUrl.fetch原创 2020-05-14 20:31:02 · 5322 阅读 · 1 评论 -
el-Cascader级联选择器的使用
效果截图:结构代码: <el-form-item label="所属部门:"> <el-cascader v-model="listQuery.deptId" // 选中项绑定值 clearable placeholder="所属部门" :options="deptList" // 放数据的地方 :pro原创 2020-05-14 17:10:54 · 1023 阅读 · 0 评论 -
el-select下拉框的使用
const getters = { sidebar: state => state.app.sidebar, token: state => state.user.token, userInfo: state => state.user.userInfo, username: state => state.user.userInfo.username, menuList: state => state.user.menuList, deptList...原创 2020-05-13 16:37:06 · 970 阅读 · 0 评论 -
css之文本两端对齐的两种解决方法
css之文本两端对齐 <el-row> <el-col> <el-form-item prop="username"> <span slot="label" style="width:4em;display:inline-block;text-alig...原创 2020-04-27 20:05:53 · 814 阅读 · 0 评论 -
解决el-dialog使用时无法正常弹出的问题
在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错.点击按钮时,发现遮罩层已经出来了,但对话框没有显示.经查,缺少属性append-to-body,将该值设置为true即可 <!--审批悬浮框--> <el-dialog class="el-dialog__width" ...原创 2020-04-24 15:49:13 · 5789 阅读 · 0 评论 -
vue实例属性_vm.$refs
VUE中$refs的基本用法原创 2020-04-21 20:54:57 · 1335 阅读 · 0 评论 -
Echarts x轴文本内容太长的几种解决方案
1.对文本进行倾斜在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位...原创 2020-04-14 09:32:35 · 455 阅读 · 0 评论 -
elmentui -- el-image显示预览信息
实现效果实现代码 <div v-for="item in url[1]" :key="item.id" class="thumbnail" :title=" '文件名称 : ' + item.imageUrl.s...原创 2020-03-27 10:54:43 · 1937 阅读 · 0 评论 -
封装echart
lineChart<template> <div :id="id" :style="{height:height,width:width}" /></template><script>export default { props: { id: { type: String, default: 'cha...原创 2020-03-24 14:04:04 · 98 阅读 · 0 评论 -
[ElementUI] 日期选择器unlink-panels属性作用
官方解释:在范围选择器里取消两个日期面板之间的联动unlink-panels默认为 false, 当像如下代码使用日期选择器时<el-date-picker v-model="value6" type="daterange" range-separator="" start-placeholder="开始日期" end-plac...原创 2020-03-23 10:55:04 · 1879 阅读 · 0 评论 -
element-ui响应式布局
<el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :...原创 2019-11-19 15:10:00 · 1959 阅读 · 0 评论 -
el-submenu实现单个菜单折叠
以上的效果就是,我打开“系统管理”折叠框,然后再打开“采集服务器”折叠框,这样一来的话就会让这个navMenu显得很高,严重的情况,就会撑破整个页面。怎么办呢?element代码实现如下:<template> <div class="index-menu"> <div class="index-nav"> &...原创 2019-11-05 12:20:03 · 12721 阅读 · 1 评论 -
echarts
配置项代码截图:完整代码: const loadControlWayOption = { //主标题 title: { text: "负载路数统计" }, //grid 直角坐标系内绘图网格 ...原创 2019-10-29 22:30:13 · 155 阅读 · 0 评论 -
v-loading
element-ui 内置的 v-loading 指令非常友好,只需要提供一个 Boolean 值就能实现加载动画的一个指令。具体的使用方法归纳为:接口请求到数据之前,显示加载中。接口请求到数据之后,消失。项目案例截图:具体的功能为当我点击“查询”按钮之后,对应的查询清单list会呈现出来首先在需要加载的dom中加入v-loading=“loading”在data 中定义初始化, l...原创 2019-10-29 17:49:46 · 5577 阅读 · 0 评论 -
elment 中 el-table 进行校验
elment 中 el-table 进行校验转载 2020-12-01 09:26:16 · 378 阅读 · 0 评论 -
vant的使用
第一步:安装和配置# Vue 2 项目,安装 Vant 2:npm i vant -S# Vue 3 项目,安装 Vant 3:npm i vant@next -S第二步:自动按需引入组件。配置babel-plugin-import插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式(官方推荐做法)# 安装插件npm i babel-plugin-import -D第三步:在项目.babelrc 文件修改配置plugins"plugins": [...原创 2021-07-09 16:20:00 · 3360 阅读 · 0 评论