4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）

已于 2023-10-09 13:38:55 修改
阅读量1.4k 收藏 1
点赞数 2
分类专栏： 前端技术社区 文章标签： vue.js 前端 javascript vue3.x+vite element-plus el-table
于 2023-09-14 15:35:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60387551/article/details/132879304
版权
前端技术社区 专栏收录该内容
40 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏

效果预览

在这里插入图片描述

一：简介

更改element-plus组件样式的几种方式（如：el-table）
(1):deep方式：使用该方法，需在根节点<div></div>内，否则无效。
外层html元素建议加class过滤筛选，防止影响其他样式。也可使用“>>>”符号
样式区域会生成[data-v-xxxxxxxx]哈希值

<!--不需要lang="scss"-->
<style scoped>

</style>

(2)代码动态修改：使用document动态修改其style样式

二：相关代码


                

                
                
        

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  GIS之家家长
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Element_Plus 分页组件 内部样式修改（较详细）

				
			

			

				

					08-11
				

			

		

		

			
				
前后端分离项目

			
		

	



                

              
                



	

		

			

				
					
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）.rar

				
			

			

				

					09-22
				

			

		

		

			
				
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725

			
		

	



                


  
              

                


	

		

			

				
					
vue3 + element-plus 修改 el-table 鼠标悬停背景、斑马纹颜色、表头颜色

					
最新发布

				
			

			

				

					Turn_to_empty的博客
				

				

					03-13
					
					2817
					
				

			

		

		

			
				
vue3修改 element-plus el-table 鼠标悬停、斑马纹及表头等样式

			
		

	





	

		

			

				
					
element-plus样式修改

				
			

			

				

					wq123123423432的博客
				

				

					09-11
					
					6062
					
				

			

		

		

			
				
element-plus样式修改

			
		

	



		

			
		



	

		

			

				
					
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改

				
			

			

				

					我这孩子从小记性就不好，什么东西都要写下来才放心
				

				

					06-21
					
					6976
					
				

			

		

		

			
				
【代码】若依(ruoyi)前端Vue3 Element Plus Vite版样式修改。

			
		

	





	

		

			

				
					
vue项目，如何修改Element-Plus等UI组件库的样式，三种方式搞定！！！

				
			

			

				

					highlighters的博客
				

				

					08-28
					
					8441
					
				

			

		

		

			
				
我们在学习和使用组件库构建页面的时候，时常会遇到这样的问题。即，尽管组件库已经提供了较多的功能，来帮助我们构建自定义的效果，但有时仍不能使我们满意。这个时候我们就不得不修改UI库的样式，来达到想要的状态。以Element-Plus为例，在Vue3中，主要有三种方式可以实现自定义第三方组件库的样式。

			
		

	





	

		

			

				
					
修改element-plus 中表格样式

				
			

			

				

					weixin_49965735的博客
				

				

					11-02
					
					2124
					
				

			

		

		

			
				
项目中的表格样式都是自定义，当我们用了第三方插件又想要改变他的样式，通常我们会找到他的css直接改掉他。但是如果是在scoped中直接修改是无法修改的。



解决办法：

1：如果你是使用less语言 可以直接用 /deep/ 来穿透，或者是 用 >>> 接class类名修改

比如：#box/deep/ .el-button{

}

2：直接在公共样式中修改即可，
...

			
		

	





	

		

			

				
					
更改ElementPlus默认样式的方法

					
热门推荐

				
			

			

				

					时光清浅处，一步一安然
				

				

					08-08
					
					1万+
					
				

			

		

		

			
				
需要注意的是，这里修改的样式是。仅修改当前组件下的样式。中下入以下代码即可生效。也可以定义公共的外部。

			
		

	





	

		

			

				
					
vue3-elementPlus部分组件样式修改

				
			

			

				

					weixin_46479909的博客
				

				

					01-24
					
					1037
					
				

			

		

		

			
				
前提：在语言下使用/deep/；在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃，建议使用:deep(css选择器)

			
		

	





	

		

			

				
					
Vue3之element-plus选择器(el-select)的样式修改【已解决】

				
			

			

				

					xla_java的博客
				

				

					12-15
					
					4370
					
				

			

		

		

			
				
Vue3：修改element-plus下拉框el-select的样式。三步走，总有一款适合你。（样式穿透）

			
		

	





	

		

			

				
					
Element-plus修改样式

				
			

			

				

					daimaxiaodao的博客
				

				

					01-26
					
					2101
					
				

			

		

		

			
				
修改样式合集

			
		

	





	

		

			

				
					
3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）.rar

				
			

			

				

					09-22
				

			

		

		

			
				
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725

			
		

	





	

		

			

				
					
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）

				
			

			

				

					05-03
				

			

		

		

			
				
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...

			
		

	





	

		

			

				
					
基于vite+vue3+pinia+element-plus+ts后台管理系统

				
			

			

				

					04-08
				

			

		

		

			
				
它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，同时支持PC、平板、手机 。

			
		

	





	

		

			

				
					
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

				
			

			

				

					06-15
				

			

		

		

			
				
2022/09/02更新： 下边网友发现有新的方案：...table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next

			
		

	





	

		

			

				
					
element-plus 样式修改

				
			

			

				

					xt0124的博客
				

				

					11-02
					
					1080
					
				

			

		

		

			
				
一个 Vue 3 UI 框架 | Element Plus (element-plus.org)2. 全局样式文件修改，使用popper-class具体添加。1. ::v-deep（推荐）、>>>、/deep/2.查看文档，延长显示时间。

			
		

	





	

		

			

				
					
Element Plus修改表格行、单元格样式

				
			

			

				

					赤蓝紫の博客
				

				

					05-27
					
					4540
					
				

			

		

		

			
				
Element Plus修改表格行、单元格样式
前言
实习工作需要根据表格的状态字段来设置行的样式，记录一波。
先来一下基础配置。(Vue3)
<template>
  <el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="age" la

			
		

	





	

		

			

				
					
Vue3 - [最强] 超详细 Element Plus 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色，覆盖原来的主题色改为自己的颜色（完美解决主题色不生效、没反应）

				
			

			

				

					王佳斌
				

				

					09-22
					
					7680
					
				

			

		

		

			
				
element plus修改主题色，vue3+element-plus主题色更换，vue3 vite如何修改扩展element plus主题色样式，全局设置element plus主题色，有什么办法可以直接全局修改主题色，对element plus默认蓝色不满意怎么替换更改其他颜色，element plus覆盖默认主题色，element plus主题色官方文档，vue3中修改element plus 主题色，element plus 修改主题色不生效怎么办，elementplus如何修改主题颜色，eleme

			
		

	





	

		

			

				
					
(el-Table)操作(不使用 ts)：Element-plus 中 Table 多选框的样式等的调整

				
			

			

				

					狮子座的男孩
				

				

					10-28
					
					1782
					
				

			

		

		

			
				
【代码】(el-Table)操作(不使用 ts)：Element-plus 中 Table 多选框的样式等的调整。

			
		

	





	

		

			

				
					
vue3+ts+vite+element-plus从搭建环境到vite优化

				
			

			

				

					08-19
				

			

		

		

			
				
对于搭建 Vue 3 + TypeScript + Vite + Element Plus 的环境，并进行 Vite 的优化，可以按照以下步骤进行操作：

1. 确保已安装 Node.js
   首先确保你的电脑已经安装了 Node.js，可以在命令行中输入 `node -v` 来检查是否安装成功。

2. 创建新项目
   打开命令行，进入到你想要创建项目的目录中，执行以下命令创建新的 Vue 3 项目：
   ```
   npm init @vitejs/app my-vue-app --template vue-ts
   ```

3. 安装 Element Plus
   进入到项目目录，执行以下命令安装 Element Plus：
   ```
   npm install element-plus --save
   ```

4. 配置 Element Plus
   在 `src/main.ts` 中引入 Element Plus 的样式和组件：
   ```typescript
   import { createApp } from 'vue';
   import App from './App.vue';
   import elementPlus from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css';

   const app = createApp(App);
   app.use(elementPlus);
   app.mount('#app');
   ```

5. Vite 的优化
   Vite 是一个基于 ES Modules 的构建工具，它的特点是快速的冷启动和开发时的实时模块热更新。但在生产环境中，我们需要对 Vite 进行一些优化。

   - 使用生产模式构建
     在 `package.json` 文件中的 `scripts` 中添加以下命令：
     ```json
     "scripts": {
       "build": "vite build"
     }
     ```
     然后执行 `npm run build` 命令进行构建。

   - 优化打包体积
     在 `vite.config.ts` 中可以配置一些优化选项，例如：
     ```typescript
     import { defineConfig } from 'vite'
     import vue from '@vitejs/plugin-vue'

     export default defineConfig({
       plugins: [vue()],
       build: {
         target: 'es2015',
         terserOptions: {
           compress: {
             drop_console: true,
             drop_debugger: true
           }
         }
       }
     })
     ```
     上述配置中，`target` 指定了构建的目标浏览器环境为 ES2015，`terserOptions` 中的配置会在压缩代码时移除控制台输出和调试器。

   - 配置静态资源路径
     默认情况下，Vite 会将静态资源放在根目录下，可以通过配置 `base` 选项来指定静态资源的路径。在 `vite.config.ts` 中添加以下配置：
     ```typescript
     export default defineConfig({
       base: '/your-base-path/'
     })
     ```

   - 优化生产环境加载速度
     在生产环境中，可以通过配置 `build.assetsInlineLimit` 来控制是否将小于指定大小的文件转换为 base64 格式内联到 HTML 中。在 `vite.config.ts` 中添加以下配置：
     ```typescript
     export default defineConfig({
       build: {
         assetsInlineLimit: 4096
       }
     })
     ```

   这些只是一些常用的优化选项，你可以根据具体需求进行配置。

希望以上步骤对你有所帮助！如果你有更多问题，可以继续提问。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
GIS之家家长

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值