个人技术分享

【区分vue2和vue3下的elementUI和elementUI Plus的button组件，介绍如何安装，属性，事件，方法等以及使用案例】

对于Button组件，Element UI和Element Plus通常不提供直接的方法调用，因为它们主要是作为UI元素来使用的。主要的交互逻辑通常是通过绑定事件（如。请注意，以上示例是基于Element UI和Element Plus的官方文档和常见用法进行的简化描述。在实际使用时，建议参考官方文档以获取最准确和详细的信息。）到Vue实例中的方法来实现的。

vue3通过ElementPlus的tooltip组件实现自定义指令文字提示

之前的项目中，有些文字比较长，不可能全部展示出来，就自己手写了个指令版本的tooltip,开始使用的显示方式，是自己在body中单独创建了个元素，然后监听鼠标事件，然后采用position:fixed的方式展示。后来，想了下，打算借助ElementPlus的tooltip组件进行实现，只需要自己去判断内容是否超出展示的边界即可，于是便有了这篇文章。

element-ui组件table去除下方滚动条，实现鼠标左右拖拽移动表格

项目前端使用vue框架，页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时，下方会出现横向的滚动条，便于用户对表格进行左右滑动。考虑到页面美观问题，滚动条设置的很窄，导致用户使用时不方便进行左右滑动。现要求，去除表格下方滚动条，用户可直接拖拽表格实现左右滑动功能。

vue3结合element-plus之如何优雅的使用表格

表格组件的使用在后台管理系统中是非常常见的，但是如果每次使用表格我们都去一次一次地从 element-plus 官网去 复制、粘贴和修改成自己想要的表格。这样一来也说得过去，但是如果我们静下来细想不难发现，表格的使用都是大同小异的，每次都去复制粘贴，对于有很多表格的后台系统来说，代码量会增加，会显得很臃肿那么有没有一种相对来说比较方便的方法去实现这个重复的过程？就比如我们只需传入配置文件，就可以帮我们生成我们想要的表格？答案当然是可行的。下面就介绍一种我个人比较喜欢的一种方案去实现表格的封装在 src 新建

el-table自定义表头数据不更新

但是为什么会出现这个情况呢：原来是Vue在编译模板时，会对静态内容进行优化，将其提升为静态渲染，以提高性能。当我们用slot="header"来定义表头时，Vue会将其视为静态内容，不会进行响应式更新。动态插槽会被Vue处理为响应式的内容，当数据变化时，Vue会重新渲染插槽内容，并将其更新到对应的位置上。这样就实现了自动更新。显示是显示出来了，但是数据是最开始默认的，不会更新，后来我搜索到方法，说讲将slot=“header” 改成#header，改了之后的确可以显示了。

el-table自定义表头数据不更新

但是为什么会出现这个情况呢：原来是Vue在编译模板时，会对静态内容进行优化，将其提升为静态渲染，以提高性能。当我们用slot="header"来定义表头时，Vue会将其视为静态内容，不会进行响应式更新。动态插槽会被Vue处理为响应式的内容，当数据变化时，Vue会重新渲染插槽内容，并将其更新到对应的位置上。这样就实现了自动更新。显示是显示出来了，但是数据是最开始默认的，不会更新，后来我搜索到方法，说讲将slot=“header” 改成#header，改了之后的确可以显示了。

vue3中基于element-plus封装一个表格弹框组件，要求可以单选和多选table数据

单选：多选：弹框表格组件代码这里多啰嗦一句，我这里是自定义列，使用单选框的方式实现的为什么要这样呢，因为我开始是使用多选加反选的方式实现单选，但这样存在一个bug，就是多选框的表头有个全选按钮，点击那个全选的时候会出现反选的问题。