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

Vue-Vue常用组件

1、@refreshDataList

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

父组件 (ParentComponent.vue)

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
	ChildComponent
  },
  data() {
	return {
	  dataList: [
		{ id: 1, name: 'Item 1' },
		{ id: 2, name: 'Item 2' },
		// 更多数据...
	  ]
	};
  },
  methods: {
	refreshDataList() {
	  // 这里可以是从 API 获取数据，或者直接更新数据列表
	  this.dataList = [
		{ id: 3, name: 'Item 3' },
		{ id: 4, name: 'Item 4' },
		// 更多数据...
	  ];
	}
  }
};
</script>

子组件

<script>
export default {
  methods: {
	refreshData() {
	  // 触发父组件的 refreshDataList 事件
	  this.$emit('refreshDataList');
	}
  }
};
</script>

解释
父组件:

父组件通过 @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></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)

 <el-table-column
		label="数量"
		align="center"
		prop="number"
		width="150"
	  >
		<template slot-scope="scope">
		  {{
			scope.row.number !== null && scope.row.number !== undefined
			  ? parseFloat(scope.row.number).toFixed(3)
			  : ""
		  }}
		</template>
	  </el-table-column>

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

  <el-table-column
		label=""
		align="center"
		prop=""
		width="350px"
		show-overflow-tooltip
	  />
posted @ 2025-03-04 17:13  skystrivegao  阅读(81)  评论(0)    收藏  举报