Vue3:elementplus去除选择器边框

简介: Vue3:elementplus去除选择器边框

去除选择器边框的原因是有时候在一些表格内可能需要添加选择器,如果不去除边框那会造成边框(表格)内有边框(选择器),那就不美观


有两种思路,一种是修改内部的el-input的border,一种是修改el-select的样式,这里仅给出了第一种的样式修改,两种效果都是一样的,只是一开始我没发现el-select可以直接修改

第一种修改方式

42b7b0c6c1b94cefae925630db21ab1a.png

  :deep(.el-input){
    --el-input-focus-border:#fff;
    --el-input-transparent-border: 0 0 0 0px;
    --el-input-border-color:#fff;
    --el-input-hover-border:0px !important;
    --el-input-hover-border-color:#fff;
    --el-input-focus-border-color:#fff;
    --el-input-clear-hover-color:#fff;
    box-shadow: 0 0 0 0px !important;
    --el-input-border:0px;
  }
  :deep(.el-select .el-input__wrapper.is-focus){
    box-shadow: 0 0 0 0px !important;
  }
  :deep(.el-select .el-input.is-focus .el-input__wrapper){
    box-shadow: 0 0 0 0px !important;
  }
  :deep(.el-select){
    --el-select-border-color-hover:#fff;
  }

第二种修改方式

19df4a55e3634748bf6f0337a600738c.png

把里面的样式的颜色改成白色就可以了


相关文章
|
7天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
28 5
|
7天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
47 3
|
7天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
29 6
|
1天前
|
开发框架 JavaScript 算法
了解vue3的基本特性和底层原理
Vue3的底层原理涵盖了响应式系统的Proxy-based实现、组件的模板编译与渲染更新机制、组合式API带来的逻辑组织变革,以及其他关键特性的具体实现。这些原理共同构成了Vue3强大、高效、灵活的现代前端开发框架基础。
9 2
|
4天前
|
JavaScript
Vue3中props的原理与使用
Vue3中props的原理与使用
|
4天前
|
JavaScript 前端开发 IDE
|
4天前
|
缓存 JavaScript 前端开发
Vue2与Vue3:深度剖析核心差异与升级亮点
随着Vue.js框架的不断演进,Vue2与Vue3作为两个重要版本,各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别,旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方面的显著差异,以便更好地选择和迁移至适合项目的框架版本。
19 2
|
5天前
|
JavaScript 前端开发 API
Vue 3的响应式系统相比Vue 2有哪些改进?
Vue 3 响应式系统升级亮点:使用 Proxy 替换 `Object.defineProperty`,实现更细粒度的变更跟踪与高性能;自动追踪嵌套属性,无需 `$set` 或深度监听;支持懒响应式,提升初始化性能;改进数组响应式,直接使用原生数组方法;递归侦听器增强灵活性;静态属性追踪;自定义响应式容器;统一 `ref` 和 `reactive` API;引入 `toRefs` 函数;优化响应式 API,如 `markRaw`, `shallowRef` 等,大幅提升效率和开发体验。
|
5天前
|
JavaScript 算法 前端开发
vue3和vue2得区别
Vue 3 优化了性能,引入了更快的虚拟 DOM 算法和模块化编译,提升渲染速度并减小打包文件大小。新引入的 Composition API 提高代码组织灵活性和可维护性。Vue 3 加强了 TypeScript 支持,改进响应式系统,使用 Proxy 实现更细粒度变化跟踪。此外,包体积更小,加载速度更快。尽管与 Vue 2 存在迁移成本,官方提供迁移指南和工具以协助平滑过渡。Vue 3 旨在提供更好的开发体验和效率。
|
7天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
15 7