From f33aa6c9d8cd9f446860173e88738ee990a455b0 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Tue, 27 Feb 2024 15:40:28 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81:=20=E2=99=BB=EF=B8=8F=20=E6=B7=BB=E5=8A=A0component?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.js                    | 53 ++++++++----------
 lint-staged.config.js              |  2 +-
 src/component/table/table-plus.vue | 29 ++++++++++
 src/component/table/table.vue      | 90 ++++++++++++++++++++++++++++++
 4 files changed, 142 insertions(+), 32 deletions(-)
 create mode 100644 src/component/table/table-plus.vue
 create mode 100644 src/component/table/table.vue

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 612f148..14b3b45 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,44 +1,35 @@
-// npm i stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order stylelint-config-prettier
-// npm i stylelint-config-html stylelint-config-recommended-vue
-
-// @see: https://stylelint.io
 module.exports = {
-	/* 继承某些已有的规则 */
 	extends: [
-		'stylelint-config-standard', // 配置stylelint拓展插件
-		'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
-		'stylelint-config-standard-scss', // 配置stylelint scss插件
-		'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
-		'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
-		'stylelint-config-prettier', // 配置stylelint和prettier兼容
+		'stylelint-config-standard',
+		'stylelint-config-html/vue',
+		'stylelint-config-standard-scss',
+		'stylelint-config-recommended-vue/scss',
+		'stylelint-config-recess-order',
+		'stylelint-config-prettier',
 	],
 	overrides: [
-		// 扫描 .vue/html 文件中的<style>标签内的样式
 		{
 			files: ['**/*.{vue,html}'],
 			customSyntax: 'postcss-html',
 		},
 	],
-	/**
-	 * null  => 关闭该规则
-	 */
 	rules: {
-		'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
-		'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
-		'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
-		'string-quotes': 'double', // 指定字符串使用单引号或双引号
-		'unit-case': null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
-		'color-hex-case': 'lower', // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
-		'color-hex-length': 'long', // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
-		'rule-empty-line-before': 'never', // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
-		'font-family-no-missing-generic-family-keyword': null, // 禁止在字体族名称列表中缺少通用字体族关键字
-		'block-opening-brace-space-before': 'always', // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
-		'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
-		'no-empty-source': null, // 禁止空源码
-		'declaration-block-trailing-semicolon': null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
-		'selector-class-pattern': null, // 强制选择器类名的格式
-		'scss/at-import-partial-extension': null, // 解决不能引入scss文件
-		'value-no-vendor-prefix': null, // 关闭 vendor-prefix(为了解决多行省略 -webkit-box)
+		'value-keyword-case': null,
+		'no-descending-specificity': null,
+		'function-url-quotes': 'always',
+		'string-quotes': 'double',
+		'unit-case': null,
+		'color-hex-case': 'lower',
+		'color-hex-length': 'long',
+		'rule-empty-line-before': 'never',
+		'font-family-no-missing-generic-family-keyword': null,
+		'block-opening-brace-space-before': 'always',
+		'property-no-unknown': null,
+		'no-empty-source': null,
+		'declaration-block-trailing-semicolon': null,
+		'selector-class-pattern': null,
+		'scss/at-import-partial-extension': null,
+		'value-no-vendor-prefix': null,
 		'selector-pseudo-class-no-unknown': [
 			true,
 			{
diff --git a/lint-staged.config.js b/lint-staged.config.js
index bfec30b..6f60acb 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -2,6 +2,6 @@ module.exports = {
 	'*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
 	'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
 	'package.json': ['prettier --write'],
-	'*.{scss,less,styl,html,vue}': ['stylelint --fix', 'prettier --write'],
+	'*.{scss,less,styl,html,vue}': ['prettier --write'],
 	'*.md': ['prettier --write'],
 };
diff --git a/src/component/table/table-plus.vue b/src/component/table/table-plus.vue
new file mode 100644
index 0000000..c0d77c6
--- /dev/null
+++ b/src/component/table/table-plus.vue
@@ -0,0 +1,29 @@
+<template>
+	<el-table :data="tableData" size="large" v-bind="$attrs">
+		<el-table-column v-for="item in column" :key="item.prop" v-bind="item">
+			<template v-if="$slots[item.prop]" #default="scope">
+				<slot :name="item.prop" v-bind="scope"></slot>
+			</template>
+		</el-table-column>
+	</el-table>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+interface TableData {
+	[propName: string]: any;
+}
+
+interface Column {
+	prop: string;
+	label: string;
+
+	[propName: string]: any;
+}
+
+defineProps<{
+	tableData: TableData[];
+	column: Column[];
+}>();
+</script>
diff --git a/src/component/table/table.vue b/src/component/table/table.vue
new file mode 100644
index 0000000..34b2973
--- /dev/null
+++ b/src/component/table/table.vue
@@ -0,0 +1,90 @@
+<template>
+	<div ref="refContainer" class="table-container">
+		<table ref="refTable">
+			<thead>
+				<tr>
+					<th scope="col">序号</th>
+					<th scope="col">工厂</th>
+					<th scope="col">产量</th>
+					<th scope="col">库存</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(item, index) in data" :key="index">
+					<td>{{ index + 1 }}</td>
+					<td>{{ item.name }}</td>
+					<td>{{ item.hobby }}</td>
+					<td>{{ item.address }}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+const data = new Array(100).fill(0).map(() => ({ name: '工厂1', date: '711', hobby: '133', address: '0.333' }));
+const refContainer = ref<HTMLTableElement | null>(null);
+const refTable = ref<HTMLTableElement | null>(null);
+const scrollSpeed = ref(1); // 滚动速度，可以根据需要调整
+const scrollInterval = 16; // 滚动间隔，单位为毫秒
+
+const scrollTable = () => {
+	if (refTable.value != null && refContainer.value != null) {
+		refContainer.value.scrollTop += scrollSpeed.value;
+		if (
+			refContainer.value.scrollTop + 1 >= refTable.value.clientHeight - refContainer.value.clientHeight ||
+			refContainer.value.scrollTop <= 0
+		) {
+			scrollSpeed.value = -scrollSpeed.value;
+		}
+	}
+};
+
+onMounted(() => {
+	// 开始滚动
+	setInterval(scrollTable, scrollInterval);
+});
+</script>
+
+<style lang="scss" scoped>
+.table-container {
+	position: relative;
+	width: 100%;
+	height: calc(100vh - 810px);
+	margin: 15px 0 0 0;
+	overflow: hidden;
+
+	table {
+		width: 100%;
+		height: 100%;
+		font-size: 15px;
+		color: #fff;
+	}
+
+	thead {
+		position: sticky;
+		top: 0;
+		background-color: #002134;
+		z-index: 999;
+
+		th {
+			height: 30px;
+			text-align: center;
+		}
+	}
+
+	tbody {
+		td,
+		th {
+			height: 30px;
+			text-align: center;
+		}
+
+		tr:nth-child(2n) {
+			background-color: #001a27;
+		}
+	}
+}
+</style>