草庐IT

element-admin

全部标签

Element UI 表格 el-table 二次封装

ElementUI表格进行二次封装Tips:文章末尾有完整封装代码一、继承element表格属性需要将element提供的表格属性使用props传入组件中props:{ //表头数据 columns:{ type:Array }, //表格数据 list:{ type:Array, default(){ return[] } }, //加载动画 loading:{ type:Boolean, default:false }, //表格宽度 width:[String,Number], //表格高度 height:[String,Number], //表格最大高度 maxHeight:[Stri

Vue + element-ui form rules 校验特殊格式数据(嵌套校验)

 问题描述:①   需要多层数据嵌套表单验证失效②   表单验证事件 prop匹配不到数据,value值undefined。  首先在页面有一个新增功能 如下图:泛化答案数据格式与正常表单验证数据格式不同(如图):  对象内嵌套多层嵌套后校验数组内的值 表单内答案输入框是两个数组内的值解决方案:  首先要了解表单验证的基本规则(element官方文档) form表单绑定:model  (表单数据源)Objectform表单绑定 :rules   (校验规则)Objectform表单el-itme  prop(表单model字段)String 校验必填图标为代码收起后展示  form只包含双向数

【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

前言本文介绍vue3-element-admin如何通过ESLint检测JS/TS代码、Prettier格式化代码、Stylelint检测CSS/SCSS代码和配置EditorConfig来全方位约束和统一前端代码规范。ESLint代码检测ESLint可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。ESLint安装安装ESLint插件VSCode插件市场搜索ESLint插件并安装安装ESLint依赖npmi-DeslintESLint配置ESLint配置(.eslintrc.cjs)执行命令完成ESLint配置初始化npxeslint--init根目录自动生成的

基于vue+element ui 实现商城 商品详情配置功能 封装组件

组件背景: 商城项目实现配置商品详情列表配置不能用富文本列表内只能上传文字描述和图片实现: 基于vue+elementui商品详情页配置{{item.conts}}上移下移编辑删除添加修改取消编辑图片文本importaxiosfrom'axios'exportdefault{name:'Phones',props:{lists:{type:Array,default(){return[]},},},data(){return{myList:this.lists,inputVlue:'',show:false,showType:'',INDEX:0,}},methods:{//添加文字显示add

快速上手 Vue 和 Element-UI 组件库

 哈喽~大家好,这篇来看看快速上手Vue和Element-UI组件库。 🥇个人主页:个人主页​​​​​        🥈 系列专栏:【微服务】     🥉与这篇相关的文章:       SpringCloudSentinel使用SpringCloudSentinel使用_程序猿追的博客-CSDN博客_springcloud使用sentinel将Nacos注册到springboot使用以及Feign实现服务调用将Nacos注册到springboot使用以及Feign实现服务调用_程序猿追的博客-CSDN博客_nacosspringboot服务调用微服务介绍与SpringCloudEureka微服

vue+element实现非常好看的鲜花网站商城,页面完整,样式美观

一.项目在线预览本项目在线预览:点击访问对应管理后台在线预览:点击访问对应管理后台博客:《vue+elementui+springboot前后端分离实现通用商城管理后台,左右顶布局,含历史导航栏》二.项目结构与正常vue项目一样,安装nodejsnpminstall安装项目依赖,即package.json文件的依赖npmrundev启动项目若npminstall有报错误:python2或pythonnotfound类似错误可尝试依次执行以下两条命令:npminstallnode-sass--ignore-scriptsnpminstall--ignore-scripts三.项目实现1.首页,分

Vue2 Element DatePicker组件设置默认日期、控制日期范围

文章目录前言一、设置默认日期1.不要用placeholder2.设置动态的默认日期二、限制日期选取1.方案2.举例总结前言以前都是做练习,上周拿到这个任务直接被卡住…一、设置默认日期1.不要用placeholder依然不使用placeholder属性,在v-model初始就绑定了时间的情况下,组件可以识别并自动切换到对应日期,使用placeholder其实是无效的.placeholder展示的值并不是绑定在data中的属性上的,即便设置,初始状况下也无法获取值.el-date-pickerv-model="date"format="yyyy-MM-dd">el-date-picker>data

Vue2 Element DatePicker组件设置默认日期、控制日期范围

文章目录前言一、设置默认日期1.不要用placeholder2.设置动态的默认日期二、限制日期选取1.方案2.举例总结前言以前都是做练习,上周拿到这个任务直接被卡住…一、设置默认日期1.不要用placeholder依然不使用placeholder属性,在v-model初始就绑定了时间的情况下,组件可以识别并自动切换到对应日期,使用placeholder其实是无效的.placeholder展示的值并不是绑定在data中的属性上的,即便设置,初始状况下也无法获取值.el-date-pickerv-model="date"format="yyyy-MM-dd">el-date-picker>data

vue2+element UI+axios+sqlite连接本地数据库

问题描述:现在有一个vue2+elementUI的前端项目,用sqlite简单了搭建一个数据库,但是怎么将他们用js连接呢?首先npminstallsqlite~上网上搜下一大堆。发现了一个开源的项目,使用了Vue.js+ElementUI+Express+axios+SQLite3.比较一下它和我的项目的异同:https://github.com/shawvey/The-Weather-Helper如果github登不上可以gitclonehttps://gitee.com/liu-qiuqi/The-Weather-Helper.git(o゜▽゜)o☆这里这是gitee里的。我的项目目录:

Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态

在日常后台管理的开发中会需要对用户输入的数据进行校验,结合element提供的弹窗来进行实际操作校验用户输入&清除表单的状态div>el-button@click="dialogFormVisible=true">新增/el-button>el-dialog@open="getOpen"@close="close"title="测试新增":close-on-click-modal="false":visible.sync="dialogFormVisible"width="40%"append-to-body>el-formref="form":model="form":rules="rule