全局修改 vue2 项目 element-ui 组件 默认值

最新推荐文章于 2024-01-08 11:46:22 发布
最新推荐文章于 2024-01-08 11:46:22 发布
阅读量947 收藏 2
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50001396/article/details/130805419
版权

大家可以看到element-ui里 Table 表格的 highlight-current-row有个默认值为false。

在这里插入图片描述

需求为： 将项目中的所有表格都加上 
“ highlight-current-row = true ”
让所有的表格都有单击某行后高亮显示当前行的功能

由于目前项目中以完成的表格有大概一两百个，所以 决定用全局修改其默认值

在这里插入图片描述
正常的写法就是在每个表格里都加行 highlight-current-row

这次我们要在全局里写 所以首先我们要找到引入 element 的位置
在这里插入图片描述
我的引入写到了 use.js
在这里插入图片描述

Element.Table.props.highlightCurrentRow = { type: Boolean, default: true }

写入改代码行即可

Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7367
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
vue 项目全局修改element-ui的样式
IT-精英联盟
05-13 6012
引入了element-ui，但是和我们自己的样式颜色有很大的不同， 官网自定义主题 →点击查看 修改例子： 在src文件下创建 element-var.scss，代码如下 $--color-primary: yellow; /*修改按钮primary的颜色*/ /* 改变 icon 字体路径变量，必需 */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/ele...
vue项目中全局修改ElementUI组件某个属性的默认值
weixin_48295815的博客
06-28 626
ElementUI.组件名.props.属性名.default = 属性值;如何在vue项目中全局修改ElementUI某个组件的某个属性的默认值？在main.js中加入如下代码来修改默认配置。
elementui 修改全局组件默认值
qq_38299934的博客
07-27 341
【代码】elementui 修改全局组件默认值。
Element UI 组件全局设置默认配置
weixin_48226213的博客
01-08 1967
Element UI 组件库有时候想全局设置一些默认配置，避免重复代码。以vue项目为例，把以下js引入到main.js即可，再引入这个封装后的date-picker替换原先的el-date-picker，即可全局默认设置快捷选项，如果某个场景的组件需要定制，重新设置即可覆盖此默认值。Element UI 组件库有时候想全局设置一些默认配置，避免重复代码。以vue项目为例，把以下js引入到main.js即可。
vue2 中强制更改 element 样式
z_langjitianya的博客
10-18 1156
大部分都可以这样改样式，先打开控制台，选中你需要更改的样式的组件，在右侧找到他的类名。主要通过 ：：v-deep 来穿透样式。找到需要的类名后在style中添加。这个是更改前后的样式。
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
Vue中使用Element-ui修改默认样式
qq_39271815的博客
07-08 2510
Vue 中使用 Element-ui 修改默认样式 在使用外部 UI 组件 Element-ui 的过程中，需要覆盖默认样式，自己定义样式。在此记录使用中遇到的问题 1、全局样式 在 vue 项目中，可以创建一个全局样式表，如下图中的 global.css，可以覆盖 UI 组件中的样式，但是有一个缺点，就是整个项目中该类型的组件都会被渲染。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200708165049611.png) 例如：我想要修改 Element-
Element-UI安装以及引入方法
qq_44706779的博客
10-24 1万+
Element-UI安装以及引入方法Element UI介绍Element-UI简介vue与Element-UI的关系入门安装方法一：npm安装方式二：CDN引入引入 Element完整引入按需引入完整组件列表和引入方式全局配置开始使用 Element UI介绍 Element-UI简介        Element-UI 是基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的
2-2.vue+axios+element-ui实现修改操作
落叶的博客
03-03 1915
Vue与Axios结合进行交互 这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020 在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。 安装a...
elementui-清除弹框中表单的默认值-resetFields()
Misko的博客
11-01 7541
当弹框（dialog）中含有表单，要进行编辑、查看、新增操作，需要复用弹框，会涉及到清空表单数据。 elementui官网中dialog部分有这么一句话： Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 这里会遇到一个问题，先进行编辑再新增，使...
vue项目穿透修改element-ui样式
HPlove__77的博客
11-03 780
一般的input输入框如果配置了show-word-limit数据统计属性，在input框最后的统计文字会将input框内部的文字遮挡住。打开浏览器开发者工具会看到统计文字有element-ui组件自带的DOM节点。/deep/为穿透修改样式方式。通过修改input框内的右边距将文字显示出来。在开发者工具中可以看到其父元素上设置了同样的类名，并且只能在这里设置类名。2.通过css中的穿透修改element-ui的样式。1.首先在vue项目中给input标签设置属性名。
vue表格全局设置属性
huihuiliu_的博客
07-15 1871
全局统一设置table表格属性
Vue 重置 Element UI 组件默认样式
菜鸟记录
09-23 967
⏹Vue 重置 Element UI 组件默认样式
修改element-ui源码
xuanyuyao的博客
11-23 3113
修改element-ui源码
element-ui项目全局配置某个组件的默认属性
ctAnnice的博客
03-07 2445
这两天遇到了一个需求，就是给项目中所有上传 el-upload 组件，在请求头里添加一个model参数,参数值就取当前页面的路由router的hash。 因为项目中用到的el-upload 地方比较多，用法基本和官方文档一致： <el-form-item :label="$t('bpa_mainDocument')" required> <el-upload :action="action" :on-success="h
项目中如何修改element-ui的默认样式
weixin_48456818的博客
06-10 809
一、去掉style的scoped，用最外层盒子的class名包裹需要修改组件的class名 例： <template> <el-container class="content"> <el-button class="btn"> 确认 </el-button> </el-container> </template> <style> .content .btn{ width:300px; } </style&gt
【vue】element 中 table 的 默认排序 、后台排序 、列值的格式化展示
热门推荐
当白的技术小窝 ( git : https://github.com/canwhite )
11-06 2万+
1.默认排序很简单   在el-table标签中加入默认属性 :default-sort ="{prop:'date',order:'descending'}" 然后在单独一列中     &lt;el-table-column       prop="date"       label="日期"       sortable       width="120”&gt;     ...
vue3 element-plus黑白切换原理
最新发布
12-19
Vue3 Element Plus 中的黑白主题切换通常通过CSS变量（CSS Custom Properties）和响应式系统来实现。Element Plus 提供了一个全局的主题管理模块，它定义了一组基础的颜色变量，包括前景色、背景色等。当用户选择黑白模式时，会改变这些变量的值，如将前景色设为白色，背景色设为黑色。 具体步骤如下： 1. **创建主题变量**：在 `element-plus/packages/theme-chalk/src/index.js` 或类似文件中，定义了初始的主题颜色和其他样式属性，并设置默认值，比如 `$primary-color` 对应默认主题的颜色。 ```javascript // 示例 export const color = { primary: '#142338', secondary: '#495A64', success: '#67C23A', warning: '#E0A933', danger: '#ED5565', info: '#3F51B5', text: '#485763', // 黑白模式下的颜色 darkText: '#fff', darkBackground: '#000', }; ``` 2. **监听状态变化**：Vue组件中，通过 Vue 的 `watch` 或者更推荐的 `setup` 函数中的 `useEffect` 来监听主题状态的变化。例如，当状态变为 "dark" 时，更新主题相关的CSS变量。 ```javascript import { useTheme } from 'element-plus'; setup() { const { toggleDarkMode, isDarkMode } = useTheme(); useEffect(() => { toggleDarkMode(); // 当切换到黑暗模式时，更新CSS变量 document.documentElement.style.setProperty('--color-primary', color.darkText); document.documentElement.style.setProperty('--color-background', color.darkBackground); }, [toggleDarkMode, color]); } ``` 3. **UI组件响应**：元素 UI 组件会检测并应用这些CSS变量，使得文本、边框、背景等视觉效果相应地改变，达到黑白切换的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bliss小宝

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值