Vue-Vue常用组件/标签（持续更新ing~）

Vue-Vue常用组件

1、@refreshDataList

在 Vue.js 中，@refreshDataList 是一个自定义事件，通常用于通知父组件刷新数据列表。这种模式在子组件需要触发父组件中的某个方法时非常常见。
示例场景
假设你有一个父组件 ParentComponent 和一个子组件 ChildComponent。子组件中有一个按钮，点击按钮时需要通知父组件刷新数据列表。

父组件 (ParentComponent.vue)

子组件

解释
父组件:

父组件通过 @refreshDataList="refreshDataList" 监听子组件的 refreshDataList 事件。

当子组件触发 refreshDataList 事件时，父组件的 refreshDataList 方法会被调用，从而更新 dataList。

子组件:

子组件中有一个按钮，点击按钮时会调用 refreshData 方法。

refreshData 方法通过 this.$emit('refreshDataList') 触发 refreshDataList 事件，通知父组件刷新数据列表。

总结
@refreshDataList 是一种常见的父子组件通信方式，子组件通过触发事件来通知父组件执行某些操作。这种方式使得组件之间的职责更加清晰，父组件负责管理数据，子组件负责触发操作。

2、@keyup.enter.native

3、 :picker-options=

<el-date-picker type="date" placeholder="" value-format="yyyy-MM-dd" v-model="dataForm.stockTime"
:picker-options="{
disabledDate: (time) => time.getTime() < new Date(new Date().setHours(0,0,0,0))
}"

4、el-divider

el-divider 是 Element UI 提供的一个用于分隔内容的组件，常用于在界面上区分不同的区域或内容块。
可以按照需求在分割线内添加内容

5、ve-histogram

是基于Vue和ECharts封装的一个图表组件，专门用于渲染柱状图

6、el-tab-plane

是 Element UI 框架中用于标签页（Tabs）组件的子组件，表示单个标签页的内容。通常与 配合使用，结构如下

7、el-table-column中的fixted= left属性

fixted="left"用于将列固定在左侧，确保在滚动的时候始终可见，适合需要长显的列

8、el-table-column中的show-overflow-tooltip属性

show-overflow-tooltip 是一个常见于前端 UI 框架（如 Element UI）中的属性，主要用于处理文本内容过长时的显示问题。
当设置为 true 时，如果单元格或元素的内容过长被截断或隐藏（通常通过 CSS 的 overflow: hidden 和 text-overflow: ellipsis 实现），鼠标悬停在该内容上时会显示一个工具提示（tooltip），展示完整的内容。

9、el-table-column中数字显示保留到三位小数 (toFixed)

10、table-column 固定像素大小 超出部分显示... 用show-overflow-tooltip

11、穿梭框 el_transfer

12、获取字符串首字母拼音 import Pinyin from 'js-pinyin'

汉字转拼音工具

完整拼音：wo ai bian cheng

首字母：wabc

13、remote-method 与 select-method 区别

这两个是 Element UI 中 el-select 下拉框 的核心方法，用途完全不同，先一句话总结区别：
核心区别详解

1. remote-method（远程搜索方法）
   必须配合 :remote="true" 使用
   入参：输入框的关键词（query）
   做什么：根据输入内容从后端拉取下拉选项
   场景：数据量很大（几百上千条），不能一次性加载所有选项
2. @change（select-method 选中事件）
   不需要远程搜索也能使用
   入参：当前选中的 value 值
   做什么：选中选项后执行业务逻辑
   场景：选中后获取详情、联动其他下拉、发送请求等

特性	remote-method	select-method
作用	远程搜索加载选项（输入关键词，从接口查下拉数据）	选中项触发事件（点击选中某个选项后执行逻辑）
触发时机	输入框输入内容、清空、聚焦时	点击选中下拉选项时
核心用途	动态加载远程下拉数据	监听选中结果，做后续业务处理
绑定方式	方法绑定（:remote-method）	事件绑定（@change）****