Element Table 批量删除
问题：在起初我写的时候是根据元素的name是否相同判断是否是同一个节点，出现的问题就是，如果说两个元素的name相同，就会判断出错
- 1
>>>如果vue的style使用的是css，那么则 - 2
/deep/ - 3
::v-deep切记必须是双冒号
vue样式穿透 ::v-deep的具体使用
之前在项目中用到了 element UI，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉 scoped 话又会影响全局样式。想了好多方法，都没得到很好的解决。
最后呢，还是通过翻阅 官方文档才解决的。其实官方文档早就给出了解决方案，怪自己没有认真看文档，对 vue 的掌握还是不够熟悉啊
深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得 '更深' ，例如影响子组件，你可以使用 >>> 操作符：
<style scoped>
.a >>> .b { /* ... */ } </style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* … */ }
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作
例如：
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。 此时我们可以使用第三种方式
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
使用场景:element-ui 中的样式时只能通过深度作用选择器：
style 为 css 时的写法如下.a >>> .b {
***
}
style使用css的预处理器(less, sass, scss)的写法如下
// 第一种/deep/
/deep/ .a {
***
}
// 第二种::v-deep
::v-deep .a{
***
}
建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快
注意：动态生成的内容不受 scoped 影响
通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是你仍然可以通过 深度作用选择器 >>> 来为他们设置样式
2024-05-30
怎么使＜el-input＞在同一行显示，在＜div＞或其它的父标签里不换行？
其实只需要改一个style属性即可，这个属性就是 display:inline ！！！
2024-05-31
Element UI与Element Plus：Vue框架下的UI组件库对比
Element UI和Element Plus都是基于Vue的桌面端组件库，提供了丰富的UI组件，帮助开发者快速构建美观、功能强大的Web应用程序。它们各自具有独特的特点和优势，选择适合的组件库对于项目成功至关重要。本文将对比两者在功能、性能、兼容性等方面的区别，帮助你选择适合你的项目需求的组件库。一、定义和框架区别
Element UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库，基本不支持手机版。Element Plus：基于Vue 3，面向设计师和开发者的组件库，组件布局考虑了手机版展示。
由此可见，Element Plus和Element UI的区别在于所使用的Vue版本不同。Vue 3相对于Vue 2进行了一些重大变更，因此在上手难度和使用方式上会有所不同。
二、性能和易用性
Element Plus是Element UI的升级版，在性能、可维护性、易用性等方面都有所提升。Element Plus还针对Vue 3的优化进行了一些性能上的改进，例如使用teleport而不是slot来实现组件的弹出框、弹出层等，减少组件的层级，提高渲染性能。三、组件设计
Element Plus的组件设计更加轻量化和简洁化，去掉了一些不常用的组件，例如Image、Upload、Radio等，而新增了更符合当前开发趋势的组件，例如Tree、Avatar、Chip等。整个库的样式风格也更加简洁、扁平化，与当前流行的设计趋势相符。相比之下，Element UI的组件库相对较为完整，但可能存在一些过时或使用频率较低的组件。四、兼容性
由于Element UI基本不支持手机版，因此在移动端兼容性方面可能存在一些问题。而Element Plus则考虑了手机版展示，因此在移动端兼容性方面更加优秀。如果你的项目需要开发移动端应用程序，Element Plus可能是一个更好的选择。五、总结
总的来说，Element Plus和Element UI在很多核心组件上的设计差不多，例如Button、Input、Table等，但在一些细节上有所不同。如果你正在使用Vue 2.0开发桌面端应用程序，并且对移动端支持要求不高，那么Element UI可能是一个更好的选择。而如果你正在使用Vue 3开发应用程序，并且需要更好的性能和移动端支持，那么Element Plus可能更适合你的需求。不过需要注意的是，由于两者在代码风格、语法习惯等方面可能有所不同，因此在使用过程中可能需要开发者根据自己的实际情况进行调整和适应。
2024-06-18
Element UI 给组件的属性加上冒号:的作用
洛飞2024-09-05 22:17
在Vue.js中使用Element UI时，如果需要给组件的属性加上冒号（:），这表示你正在绑定一个动态属性。冒号后跟的是一个JavaScript表达式，而不是一个字符串。
例如，如果你想要绑定一个动态的值到el-input组件的value属性，你应该这样写：
<el-input :value="dynamicValue"></el-input>
这个例子中，dynamicValue是你在Vue实例的data对象中定义的一个响应式属性。当这个属性的值改变时，el-input的value属性也会相应地更新。
2024-12-26
element-ui表单el-form的label自适应宽度并对齐
el-form标签中label-width设置为auto，label就会自适应标签的长度，但会默认右对齐(此时使用label-position="left"也无法改变对其方式)
2024-12-27
解决：使用element-ui中的checkBox复选框组件时，绑定click事件会触发两次
原因分析： 在chechBox组件内部封装的时候，点击事件绑定了两次，一个是span标签，一个是input标签，所以每次点击都会执行两次，导致两次弹框。
2025-01-14
Element-UI 分割线Divider的使用
单独的分割线： <div> <span>内容1</span> <el-divider></el-divider> <span>内容2</span> </div>
2025-02-12
Vue引入Element Plus（element-ui），修改主题变量，定义全局样式
shawxlee2023-02-24 17:49:39
1、安装element-plus
npm install element-plus --save
2、src/assets/styles下新建一个scss文件，用于自定义全局样式，写入以下内容
/* 改变element主题变量 */
$--color-primary: #377dff; /* 仅可修改预设变量（见附录），不可新增 */
$--color-success: #00c9a7;
$--color-warning: #f5ca99;
$--color-danger: #ed4c78;
$--color-info: #A5ABD7;
/* 改变element的icon、字体路径变量，必需 */
$--font-path: "~element-plus/theme-chalk/fonts";
@import "~element-plus/packages/theme-chalk/src/index";
3、在main.js中引入该scss文件
import Vue from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/styles/custom.scss'
Vue.use(ElementPlus)
4、在组件中应用变量
<el-button type="primary">主要按钮</el-button>
2025-04-25