![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue+elementUI的组件变化使用
一介青烟小生
小白一个
展开
-
vue+ElementUI的实际应用例子之表格
vue+ElementUI的实际应用例子。原创 2022-07-19 17:20:35 · 1252 阅读 · 0 评论 -
【Vue】动态组件的使用
【Vue】动态组件的使用最近在开发中,产品经理给了一个新的需求,就是在一个页面里面对页面进行多个切换,就是那种不改变路由变化,但是需要点击菜单改变页面的内容或者说切换页面。就类似是在一个管理系统里面的某个页面再加一套管理系统,但是切换页面需要改变页面内容,但是不能改变路由。使用动态组件因为涉及的页面比较多,而且有些页面是外面的大系统也需要使用的。而且页面还是需要动态展示的,就是第二套的管理系统是后端返回的菜单,所以就说明,我们需要进行批量的对页面进行组件的注册的方法,方便来展示。涉及的页面比较多,然后动态原创 2022-07-08 16:10:27 · 2352 阅读 · 0 评论 -
elementUI的日期选择器获取选择时间的格式,获取时间戳等
elementUI的日期选择器获取选择时间的格式,获取时间戳等在使用日期选择器的时候,我们需要把时间进行格式化,然后再传给后端比如传时间戳value-format="timestamp"<el-form-item label="申请人生日" required> <el-date-picker type="date" value-format="timestamp" placeholder="申请人生日" v-model="ruleFormUser.date1" s原创 2021-06-07 11:22:19 · 3355 阅读 · 1 评论 -
elementUI的表格多选功能之规定禁止选择
elementUI的el-table表格多选功能之禁用多选在进行表格的多选的时候我们会碰到那种,只允许部分内容可以被选择,不符合的要禁用多选框,这个时候就要用到elementUI el-table的selectable所以我们可以这样写<el-table :data="tableData" border v-loading='loading' size="small" @selection-change="handleSelectionChange"> <el-table-原创 2021-06-07 11:18:28 · 4410 阅读 · 0 评论 -
elementUI的自定义主题
elementUI的自定义主题的设置一、安装elementUI以及sass-loader,node-sass(项目中使用scss编写需要依赖的插件)npm i element-ui -Snpm i sass-loader -Dnpm i sass-loader -D有时候安装sass的时候会安装失败,可以直接安装固定的版本号。直接复制到到package.json文件,然后npm install"sass-loader": "^7.0.0","node-sass": "^4.12.0",二原创 2021-03-10 15:38:39 · 1463 阅读 · 0 评论 -
el-card的点击事件失效的解决方式
@click = 'link'改为@click.native = 'link'//变成原生绑定原创 2021-02-27 09:29:25 · 679 阅读 · 0 评论 -
el-upload的多文件上传
el-upload实现多文件上传的方法<el-upload class="upload-demo" drag action="#" multiple ref="upload" :file-list="files" :http-request="handleUpload" :on-exceed='handExceed' :o原创 2020-12-24 10:48:23 · 4156 阅读 · 0 评论 -
elementUI的动态tabs页的使用,vue的动态组件的操作
elementUI的动态tabs页的使用,vue的动态组件的操作有时候我们需要用到动态的tab页,结合不同的页面内容来显示。这里是使用了elementUI的动态tabs页来实现的<div class="right" v-loading="loading"> <div class="between main-top"> <span @click="addTab(editableTabsValue,'groupInfo(组件的名称)','tabs页的原创 2020-12-16 15:10:04 · 9362 阅读 · 0 评论 -
axios的请求拦截器和动态loading的
axios的请求拦截器和动态加载loading,两个结合在这里使用的是,vue+axios+elementUI来实现的import axios from 'axios'// axios.defaults.baseURL = '/api'import browser from '../common/browser'import qs from 'qs';import { Loading } from 'element-ui'let loading = null //定义loading变量//原创 2020-12-01 10:40:26 · 472 阅读 · 0 评论 -
elementui的el-table的v-for遍历二维数组显示
elementUI的el-table的循环遍历二维数组,v-for循环遍历二维数组并且显示成表格的形式这些其实就是Excel表格的数据转化下来先是查看数组类型的样式全部的数据async reafXls(){ let res = await this.$api.teaback.readXls() console.log(res); this.dataList = res.excelObj this.goodsList = res.excelObj.slice(原创 2020-09-25 15:40:21 · 23036 阅读 · 4 评论 -
vue+elementUI的el-form的回车键登录,监听键盘来触发事件
vue+elementUI的el-form的回车键登录,监听键盘来触发事件1.当只有一个el-input的时候,可以用elementUI的自带的回车键触发提交事件但是有时候会同时触发刷新页面,这样可以在el-form上添加@submit.native.prevent来解决<el-form :model="ruleForm" label-position='left' status-icon :rules="rules" @submit.native.prevent ref="ruleForm"原创 2020-09-16 11:02:12 · 3245 阅读 · 4 评论 -
elementUI的日期选择器获取选择时间的格式,获取时间戳等
elementUI的日期选择器获取选择时间的格式,获取时间戳等在使用日期选择器的时候,我们需要把时间进行格式化,然后再传给后端比如传时间戳value-format="timestamp"<el-form-item label="申请人生日" required> <el-date-picker type="date" value-format="timestamp" placeholder="申请人生日" v-model="ruleFormUser.date1" s原创 2020-09-14 17:52:02 · 5641 阅读 · 0 评论 -
elementui的文件上传限制格式和大小
elementui的文件上传限制格式和大小第一种是accept<el-upload class="upload-demo" action="#" :http-request="httpRequest" :on-change="onChange" :accept="accept" multiple :limit="1" ref="upload原创 2020-09-05 14:10:14 · 5418 阅读 · 2 评论 -
vue结合elementui的后端返回数据的分页操作
vue结合elementui的后端返回数据的分页操作//vue页面<div class="block" style="margin-top:20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" //记原创 2020-09-04 16:50:01 · 1561 阅读 · 0 评论 -
elementui的图片上传加限制规则并且显示图片在页面,不经过后端
elementui的图片上传并且显示图片在页面,不经过后端<el-upload action="#" ref='upload1' list-type="picture-card" :on-change="onChange" :limit="1" :auto-upload="false" :file-li原创 2020-08-27 09:29:04 · 705 阅读 · 0 评论 -
vue打包elementUI的时候,小图标变成小方框
在vue的build文件夹找到utils.js文件,然后在下面这个位置添加publicPath: '../../'function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ lo原创 2020-07-20 14:43:06 · 2131 阅读 · 1 评论 -
在el-table的功能,并且在单元格里面加入输入框
在我们的前端拿到后端返回的数据的时候,需要在el-table的功能,并且在单元格里面加入输入框,为了让输入框的输入时候不会影响到其他的输入框,可以使用@input来获取输入框内容的值<el-table> <el-table-column prop="reality_fans" label="输入框" show-overflow-tooltip> <template slot-scope="scope">原创 2020-07-20 10:26:13 · 8006 阅读 · 0 评论 -
elementui的el-table的插槽功能,添加判断值,在单元格添加输入框,点击事件等等
elementui的el-table的插槽功能,添加判断值,在单元格添加输入框,点击事件等等<el-table ref="multipleTable" :data="data" tooltip-effect="dark" border style="width: 100%" @selection- <el-table-column prop="is_ban" label="是否" show-overflow-tooltip> <tem原创 2020-07-20 10:24:34 · 3680 阅读 · 0 评论 -
elementui的文件上传功能-.上传文件-带参数-手动
elementui的文件上传功能-.上传文件-带参数-手动<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="mini" style="padding-right:10px;padding-left:10px;padding-top:20px;"><el-form-item label="参数:" prop="bacth">原创 2020-07-18 10:31:31 · 2821 阅读 · 1 评论 -
elementui的上传功能-上传图片加参数
elementui的上传功能-上传图片加参数<el-form class="up-code"> <el-form-item> <el-upload class="upload-demo upload-flex" action="#" ref="upload"原创 2020-07-18 10:28:46 · 2815 阅读 · 4 评论 -
使用elementui的el-tabs标签页,点击一个tabs后,下面的组件进行刷新
使用elementui的el-tabs标签页,再点击后,下面的组件进行刷新在父组件使用<template> <div class="box"> <h3 style="text-align: center;">微微派单管理系统</h3> <template> <el-tabs v-model="activeName" @tab-click="handleLoad">原创 2020-07-17 17:33:46 · 10697 阅读 · 3 评论