ElementUI，饿了么UI框架

vue-elementUI去掉input上下箭头

2024-08-08

一、问题描述vue中使用elementUI，在使用input输入框，设置type为number数字类型是，会出现如下上下箭头问题；如下所示：二、问题解决出现这个问题，只需要重置下elementUI的input样式即可解决，如下： /* element样式重置 start */ /* 去掉input尾部上下小箭头 start */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ ; -webkit-appearance: none !important; ; -moz-appearance: none !important; ; -o-appearance: none !important; ; -ms-appearance: none !important; ; appearance: none !important; ; marg

Vue3项目如何安装element plus

2024-07-05

320 0

Element Plus 基于Vue 3,面向设计师和开发者的组件库安装# NPMnpm install element-plus --save # Yarnyarn add element-plus # pnpmpnpm install element-plus 一、全局引入打开main.jsimport { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' ; const app = createApp(App) ; app.use(ElementPlus) app.mount('#app') 二、按需引入安装npm install -D unplugin-vue-components unplugin-auto-import Vite打开vite.config.js引入import { defineConf

vue3+element plus使用vuex实现折叠导航菜单

2024-07-05

371 0

vuex简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一、安装vuexnpm install vuex -S 二、创建vuex文件夹在src目录下创建store文件夹，并创建index.js文件，编写如下代码import { createStore } from "vuex"; export default createStore({ ; ; state: { ; ; ; ; isCollapse : true ; ; }, ; ; mutations: { ; ; ; ; updateIsCollapse(state, payload){ ; ; ; ; ; ; state.isCollapse = !state.isCollapse ; ; ; ; } ; ; }

vue+elementUi结合websocket实现后台新订单实时消息推送

2024-05-30

457 0

1、前端我们使用vue+elementUI的Notification 通知组件：悬浮出现在页面角落，显示全局的通知提醒消息。this.$notify({ ;;;title: '温馨提示', ;;;type: 'success', ;;;dangerouslyUseHTMLString: true, ;;;position: 'top-right', ;;;message: '<p>你有新的订单信息：“'+jsonData.pro_id+'”，</p><p>下单时间：“'+jsonData.appointment_date+jsonData.appointment_time+'”，</p>' }); 2、通过结合websocket连接接收后端传过来的数据，实现后台新订单实时消息推送，以下是部分代码：created () { // 创建 W

前端vue+elementUi表单提交按钮防止多次提交

2024-05-22

504 0

vue按钮防止多次提交在Vue中防止按钮多次提交可以通过几种方式实现，其中一种方法是使用本地状态变量来跟踪按钮的状态（禁用或启用）。以下是一个简单的示例：1、前端代码<template> ;<div> ;<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"> ;;<el-form-item label="账号" prop="name"> ;;;;<el-input v-model="addForm.name" ></el-input> ;;</el-form-item> ;;<el-form-item label="密码" prop="password" > ;;;;<el-input v-model="addFo

解决vue使用element checkbox 点击一个结果全选的问题

2024-04-22

635 0

问题描述：按照官方文档使用element的checkbox复选，点击任意一个，结果全选了1、页面代码：<el-form-item label="可见数据" prop="datasoure"> ;<el-checkbox-group v-model="addForm.datasoure" @change="handleCheckedChange"> ;;<el-checkbox v-for="city in cities" :label="city" :key="city" border>{{city}}</el-checkbox> ;</el-checkbox-group> </el-form-item> 2、js代码：const cityOptions = ['上海', '北京', '广州', '深圳']; return { ;;cities: cityOptions, addForm: { ;;dataso

elementUI el-table 表格实现手动选择展示列

2022-09-29

3377 0

一、使用场景：在使用elementui开发表格功能的时候，我们会遇到表格字段列数过多的情况，这时我们就需要对其进行设置，选择是否展示列，默认展示多少列，还有就是到处表格数据的时候，我们可以指定选择列到处，这样体验方面是很好的。二、效果展示：点击操作按，展开筛选类选项三、实现思路：（1）表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；（2）点击表格最后一列表头（操作栏），弹出选择框；【el-popover】（3）选择框中包括：全选复选框、所有字段复选框组、取消按钮、确定按钮；【el-checkbox-group】（4）选

vue中element-ui固定el-dialog模态窗高度

2022-01-10

4686 0

vue中element-ui固定el-dialog模态窗高度，超出显示纵向滚动条，可以使用下面方法<style lang="css"> .el-dialog { ;margin: 5vh auto !important; } .el-dialog__body { ;height: 75vh; ;overflow: hidden; ;overflow-y: auto; } </style>

vue中element-ui设置el-dialog点击空白背景不关闭

2021-10-11

3790 0

vue中使用elementUI框架的el-dialog模态窗口，有时我们会不消息点击到空白蒙版就自动关闭了，我可以关闭这个，这样就不会导致我们辛辛苦苦输入的东西都没了，我们可以给el-dialog加个属性即可;:close-on-click-modal="false" 详细demo: <el-dialog title="添加商品分类" :visible.sync="addDialogVisible"; width="30%" @close="addDialogClosed" :close-on-click-modal="false">  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width=

Vue+ElementUI表格实现点击图片预览功能

2021-08-06

5474 0

功能描述：用户点击表格列表其中一张图片，显示弹窗，并显示图片。实现思路：给图片添加点击事件，点击图片获取图片url，展示图片效果展示：实现代码：1、给表格列图片添加点击事件，传递参数<template> <el-table :data="VipList" border stripe @selection-change="handleSelectionChange" v-loading="loading"> <el-table-column align="center" type="selection" width="55"></el-table-column> <el-table-column label="ID" prop="id" min-width="50"></el-table-column> <el-table-

Vue+ElementUI实现点击按钮刷新页面

2021-08-06

4407 0

vue中ElementUI刷新页面代码html按钮代码<template> <div> <a href="javascript:;" title="刷新" class="refresh" @click="refresh()"><i class="el-icon-refresh-left"></i></a> </div> <template> js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()<script> export default { methods: { ; // 刷新 ; refresh(){ ; ;this.$router.go(0) ; ;//或 ; ;window.location.reload() ; } } } </script>

Vue+ElementUI实现点击按钮全屏功能

2021-08-05

4140 0

用vue做网站后台的时候，我们有时需要做个点击按钮进入全屏的功能，以下是个案例，共大家参考。按钮模块代码<template> <div> <a href="javascript:;" title="全屏" @click="screen()"><i class="iconfont icon-quanping"></i></a> </div> </template> js部分代码：<script> ;;export default { ;;;;data(){ ;;;;;;return{ ;;;;;;;;//全屏 ;;;;;;;;fullscreen: false, ;;;;;;} ;;;;}, } ;;;;;;screen(){ ;;;;;;;;let element = document.documentElement; ;;;;;;;;;;if (this.fu

Vue ElementUI如何使用组件，组件的使用方法实例

2021-07-25

2267 0

开发项目过程中，涉及重复的代码，比如模态窗，我们可以封装起来，然后采用组件的形式，引入即可，这样也方便维护。以下我们来封装Dialog 对话框组件1、创建Dialog组件我们在项目目录下创建\src\components\Dialog.vue<template> <el-dialog;title="提示";:visible.sync="DialogVisible";width="30%";@close="DialogClosed";> ;;<span>这是一段信息</span> ;;<span;slot="footer";class="dialog-footer"> ;;;;<el-button;@click="DialogVisible=;false">取;消</el-button> ;;;;<el-button;

Vue组件如何赋值给父组件

2021-07-24

2310 0

在vue项目开发中，我们遇到重复的代码，就可以封装成组件，这就设计到组件之间的获取值和赋值问题，我们可以通过以下方式传递值给父组件页面。1、子组件赋值：使用this.$emit()this.$emit('tran','Hello;Word') 2、父组件页面绑定方法获取值<UploadPhotos;ref="showUpload";@tran="getUser"></UploadPhotos> 3、父组件获取到值之后赋值<script> export;default;{ ;;data;();{ ;;;;return;{ ;;;;;;addForm:;{ ;;;;;;;;ad_img:;'', ;;;;;;}, ;; ;;;;} ;;}, ;;components:{ ;;;;UploadPhotos ;;}, ;;methods:;{ ;;;;getUse

vue ElementUI使用时间日期、时间选择器的使用方法

2021-07-20

2620 0

效果展示：vue ElementUI提供了三种时间日期1、TimePicker 时间选择器：用于选择或输入日期2、DatePicker 日期选择器：用于选择或输入日期3、DateTimePicker：日期时间选择器，在同一个选择器里选择日期和时间本文主要用到DateTimePicker 日期时间选择器<template> ;;;;<div> <el-form-item;label="时间";prop="addtime"> <el-date-picker;v-model="addForm.addtime";type="datetime";placeholder="选择日期时间";format="yyyy-MM-dd;HH:mm:ss";value-format="yyyy-MM-dd;HH:mm:ss"></el-date-picker>

解决vue-animate-number后端返回数据不渲染问题

2021-07-19

2647 0

最近开发中用到了vue-animate-number组件，发现数据不能通过接口返回的值自动渲染。代码如下<animate-number;from="0";:to="countArt";duration="1000"></animate-number> 看似没什么问题，后面才发现没加上:key="countArt"的原因，加上之后就能正确渲染了<animate-number;from="0";:to="countArt";:key="countArt";duration="1000"></animate-number>

Vue+elementUI如何使用文件Upload 上传文件

2021-07-18

2262 0

vue+elementUI实现上传案例实现对图片进行移除、上传、修改、点击图片对图片进行预览1、html代码部分<template> ;;;;<div> ;;;;;;;;;;;;<el-form;:model="setupForm";ref="setupFormRef";label-width="100px"> <el-form-item;label="登录LOGO";prop="logo"> <el-upload;:action="uploadURL";:on-preview="handlePreview" :on-remove="handleEditRemove2";list-type="picture";:headers="headerObj";:data="otherData";:on-success="handleEditSuccess2";multiple;:limit="1";:file-list="file

Vue ElementUI 表格实现loading加载动画效果

2021-07-16

10339 0

我们在使用表格的时候，有时由于后端接口或者是网络慢等问题，会出现请求接口数据慢问题，这时我们就可以给表格<el-table>加个loading加载动画，接口请求成功之后再关闭loading动画效果。ElementUI表格动画主要用到v-loading="loading"1、首先在表格中加入属性：v-loading="loading";<template> ;;;;<div> <el-table;:data="UserList";border;stripe;;v-loading="loading"> ;;;;;;;;;;;;;;;;<el-table-column;label="ID";prop="id";min-width="20"></el-table-column> ;;;;;;;;;;;;;;;;<el-tabl

vue ElementUI Cascader 级联选择器使用方法

2021-07-16

2282 0

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。1、前端代码：;<template> ;;;;<div> <el-form-item;label="所属菜单";prop="pid"> <el-cascader;expand-trigger="hover";:options="parentCateList";:props="cascaderProps";v-model="selectedKeys";@change="parentCateChanged";clearable;;change-on-select;placeholder="顶级菜单"></el-cascader> </el-form-item> </div> ;</template> 参数说明：1、expand-trigger="hover";;定义展开子级菜单的触发方式，

vue-table-with-tree-grid参数大全、参数配置

2021-07-15

2277 0

vue-table-with-tree-grid参数大全、参数配置，供大家参考使用1、安装：npm:npm;i;vue-table-with-tree-grid;-S yarn:yarn;add;vue-table-with-tree-grid 2、引入Vue.use(ZkTable) Orimport;Vue;from;'vue' import;ZkTable;from;'vue-table-with-tree-grid' ; Vue.component(ZkTable.name,;ZkTable) 3、API参数：属性说明类型参数默认值data表格各行的数据Array-[]empty-text表格数据为空时显示的文字String-'暂无数据'columns表格各列的配置（具体见下文：Columns Configs）Array-[]show-header是否显示表头Boolean-trueshow-index是否显