对抗el-element的自带样式

最新推荐文章于 2024-05-30 20:12:00 发布
最新推荐文章于 2024-05-30 20:12:00 发布
阅读量188 收藏
点赞数
文章标签： vue vue.js javascript css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjxhliu/article/details/110040120
版权

在这里插入图片描述
原本el-element的样式很让人头疼
el-input的输入框的位置离图标的距离总是差很多
一在Elements里面检查才发现有个内部div的margin-left是138px
真真让人烦躁
查了css样式
可能是我不太会改
最后成功消除空格
原本是：
在这里插入图片描述
后来改成
在这里插入图片描述
即可
在这里插入图片描述
感觉这个方法有点偏，如果其他好的方法希望大佬赐教

wjxhliu
关注
el-element布局控件layout中的el-row和el-col
m0_50618406的博客
11-13 4670
在使用element组件中，layout布局控件能够很好的帮我们对页面进行布局。其中最常用到的就是栅格基础布局。 如下所示 <el-row :gutter='40'> <el-col :xs="12" :sm="12" :lg="6">第一个</el-col> </el-row> 对于el-row，其常用属性和方法下表 参数 说明 可选值 gutter 栅格间距 type 布局模式，可选flex gutter 栅格间距 对
04-清除内外边距
iiopy的博客
04-19 525
网页元素有很多都自带内外边距，而且不同浏览器默认的值也不一致。因此在布局前，首先要清除下网页元素的内外边距。 *{ margin: 0; padding: 0; } 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置上下左右内外边距了。 ...
Element概述、入门案例及布局
m0_61961937的博客
05-31 7521
Element概述、入门案例及布局简单示例
【Element入门】2、Element UI 的基本使用
weixin_52938153的博客
05-22 1404
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
【vue+El-element】实现todolist
糯米w的博客
08-25 1164
好像拖更了很久，很抱歉，最近想了一下css和js等内容还是不总结了，本来内容就多，不是一篇博客能说完的，而且我也只学了皮毛，以后还是通过实例的方式来分享一下学过的东西，希望能帮到大家。 目录 一、实现功能 ​二、实现方法 1.数据的传递 2.按钮的实现 3.全选按钮的实现 4.记录用户键盘数据 三、源代码（感兴趣自己试试） 总结 前言 最初了解到这个todolist的时候我还感觉挺简单的，但实现确实遇到了好多问题（我太菜了），而且在网上看大佬的文章，看不懂（哭），所以我会.
vue修改Element的el-table样式的4种方法
10-14
本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 1. **row-style** 这个属性允许你为表格的每一行设置样式。它可以是一个返回CSS样式的函数，或者是一个包含默认样式的对象。例如，在提供的...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree'...
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
el-element中el-table表格嵌套el-select，动态选择对应值
温柔咩咩的博客
01-12 1万+
先看问题还原图： 问题描述： 小编在做需求时，遇到了在el-table表格中加入多条数据，并且每条数据要通过el-select来选取相应的值，做到动态选择。 解决方法： 思路： 最开始，小编的实现效果是左边红色框的效果，选择其中一个时，其他的也对应赋值。 主要是因为el-option的选项都是相同的，v-model的值也是相同的。 那让每一条 v-model的值不同不就好了么！！ 代码： html中代码： <el-table-column label="...
el-element中导航菜单的使用el-menu
m0_50618406的博客
11-13 7922
在进行vue开发的时候，我们不可避免会使用到导航菜单，element方便的为我们提供了导航菜单组件，我们可以轻松创建自己的导航菜单。 不过el-menu属性和方法复杂多样，在此只列举常用的属性和方法，更多的使用说明可以参考官方手册 element官方使用说明 <el-aside :width="iscollapse ? '64px' : '200px'"> <div class="toggle-button" @click='toggleCollapse'>|||</div&
Element ui 快速入门（基础知识点）
最新发布
m0_59365887的博客
05-30 2173
高效开发：提供一系列现成的、高质量的Vue组件，加速Web应用程序的开发过程。设计一致性：确保应用程序界面元素间的一致性与美观性，提升用户体验。易用性：组件简单易用，文档齐全，降低了学习成本，便于开发者快速上手。响应式布局：支持响应式设计，适应不同设备和屏幕尺寸，实现多平台兼容。节省维护成本：通过统一的组件和样式，简化后期的维护和迭代工作。团队协作优化：标准化的组件库促进团队成员之间的高效协作和代码复用。高度可定制：支持主题定制和插件扩展，满足项目的个性化需求。体积优化考量。
elementui布局框架 elementui+axios+后台代码 删除 添加 修改 登录
BUG专业户
05-26 1300
elementui布局框架 elementui+axios+后台代码 删除 添加 表单校验 修改 登录 过滤器
element常用布局总结
Beatingworldline的博客
09-22 2232
之前的需求都是自己写布局 多多少少会浪费些时间 也容易出问题 今天看到element官方有布局模式，总结下以备不时之需 Container 布局容器 用于布局的容器组件，方便快速搭建页面的基本结构： <el-aside>：侧边栏容器。 <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。 <el-header>：顶栏容器。 &lt
【Element入门】3、Element UI 表单组件详解
weixin_52938153的博客
05-22 2160
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
elementui的介绍和使用 以及使用elementui完成增删改查和登录
热门推荐
Ysuhang的博客
05-31 2万+
elementui的介绍和使用 以及使用elementui完成增删改查和登录
Element UI框架学习篇(二)
SSS4362的博客
02-09 2824
主要讲述的内容有 ①整体布局 ②按钮的几种用法
更改一些el-element样式
lixiaoyu0709的博客
11-14 260
简记
Element ui 组件库 使用技巧。
i_Satan的博客
04-21 7317
el-radio组件 单选框取消选中。 el-radio 单选框组件默认是不能取消选中的. 解决办法: 我们可以给他添加 click事件,把 label 值 传入点击事件,然后每次点击的时候去判断 label 和 radio 的值是否相同.如果相同 就置为空,如果不同,就给 radio 赋值. 参考文章@官尔 方法一: <el-radio-group v-model="radio2"> <el-radio @click.native.prevent="clickitem(3
el-element-dialog-drag
08-24
可以根据需要，自定义对话框的大小、样式和内容，并应用el-element-dialog-drag指令实现拖动效果。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *3* ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值