Hooke / custom_table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4fc3e791 1 parent 24f1c0fd

✨ feat: 完善显示结构，新增主题色控制

Inline Side-by-side
Showing 5 changed files with 252 additions and 34 deletions
{
"name": "temple_material_request",
"description": "西园寺物资申请系统",
"name": "custom-table",
"description": "自定义表格",
"version": "1.0.0",
"scripts": {
"dev": "vite",
......@@ -36,6 +36,7 @@
},
"dependencies": {
"@dedisuryadi/json-form-data": "^0.1.1",
"@element-plus/icons-vue": "^2.3.1",
"@tinymce/tinymce-vue": "4.0.7",
"@vant/area-data": "^1.3.1",
"@vant/touch-emulator": "^1.4.0",
......@@ -82,6 +83,7 @@
"pinia": "^2.0.14",
"postcss-px-to-viewport": "^1.1.1",
"qs": "^6.10.3",
"sass": "^1.78.0",
"tslint": "^6.1.3",
"unplugin-auto-import": "^0.8.8",
"unplugin-vue-components": "^0.23.0",
......
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'white': #ffffff,
'black': #000000,
'primary': (
'base': #C2915F,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
);
// 这句非常重要
@use "element-plus/theme-chalk/src/index.scss" as *;
......@@ -2,27 +2,35 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-31 12:06:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-06 17:39:52
* @LastEditTime: 2024-09-09 13:54:11
* @FilePath: /custom_table/src/main.js
* @Description:
*/
import { createApp } from 'vue';
import router from './router';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// import 'element-plus/dist/index.css'
import '@/assets/styles/element.scss' // 这是我的样式路径
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import App from './App.vue';
// import axios from './utils/axios';
import axios from '@/utils/axios';
// import 'default-passive-events'; // 解决Chrome控制台non-passive event listener输出问题
import { createPinia } from 'pinia';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const pinia = createPinia();
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 屏蔽警告信息
app.config.warnHandler = () => null;
app.config.globalProperties.$http = axios; // 关键语句
app.use(pinia).use(router).use(ElementPlus)
app.use(pinia).use(router).use(ElementPlus, { locale: zhCn })
app.mount('#app');
......
<!--
* @Date: 2024-07-23 10:34:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-06 17:35:34
* @LastEditTime: 2024-09-09 13:57:21
* @FilePath: /custom_table/src/views/index.vue
* @Description: 文件描述
-->
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
<div style="padding: 1rem;">
<el-row justify="space-between">
<el-col :span="12">
<div>
<el-button type="primary" :icon="Plus">添加</el-button>&nbsp;
<el-icon style="vertical-align: middle"><Download /></el-icon>&nbsp;<span style="vertical-align: middle">导入</span>&nbsp;
<el-icon style="vertical-align: middle"><Upload /></el-icon>&nbsp;<span style="vertical-align: middle">导出</span>&nbsp;
<el-icon style="vertical-align: middle"><Delete /></el-icon>&nbsp;<span style="vertical-align: middle">删除</span>
</div>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-input
v-model="input3"
style="width: 200px"
placeholder="搜索数据"
:prefix-icon="Search"
/>
&nbsp;
<el-popover :visible="visible" placement="bottom">
123
<span @click="visible = false">关闭</span>
<template #reference>
<div class="tooltip-container">
<el-icon style="vertical-align: middle" @click="visible = true"><Filter /></el-icon>
<span class="tooltip-text">筛选条件</span>
</div>
</template>
</el-popover>
&nbsp;
<el-tooltip
class="box-item"
effect="dark"
content="显示字段"
placement="bottom"
>
<el-icon style="vertical-align: middle"><Operation /></el-icon>
</el-tooltip>
&nbsp;
<el-tooltip
class="box-item"
effect="dark"
content="排序"
placement="bottom"
>
<el-icon style="vertical-align: middle"><Sort /></el-icon>
</el-tooltip>
&nbsp;
<el-tooltip
class="box-item"
effect="dark"
content="刷新"
placement="bottom"
>
<el-icon style="vertical-align: middle"><Refresh /></el-icon>
</el-tooltip>
&nbsp;
</el-col>
</el-row>
<el-table
:data="tableData" stripe border height="780"
style="width: 100%; margin: 1rem 0;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
<el-row justify="space-between">
<el-col :span="8">
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]"
:size="size"
layout="total, sizes"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-col>
<el-col :span="8">
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:size="size"
layout="prev, pager, next"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-col>
<el-col :span="8">
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:size="size"
layout="jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="display: flex; justify-content: end;"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus, Download, Upload, Search } from '@element-plus/icons-vue'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
......@@ -25,31 +126,76 @@ const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
const tableData = ref([])
const visible = ref(false);
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
console.log("🚀 ~ file: index.vue:136 ~ handleSelectionChange ~ multipleSelection.value:", multipleSelection.value);
}
onMounted(() => {
for (let index = 0; index < 50; index++) {
tableData.value.push({
id: index,
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
})
}
})
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const handleSizeChange = (val) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
console.log(`current page: ${val}`)
}
</script>
<style lang="less" scoped>
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer; /* 悬停时显示手形指针 */
}
.tooltip-text {
font-size: 0.8rem;
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 10px;
position: absolute;
z-index: 10;
top: 125%; /* 使 tooltip 位于触发元素下方 */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap; /* 防止文字换行 */
&::after {
content: "";
position: absolute;
top: -10px; /* 三角形放在 Tooltip 上方 */
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent; /* 创建黑色的小三角形 */
}
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
......
......@@ -1185,6 +1185,21 @@ chokidar@3.5.3, chokidar@^3.5.3:
optionalDependencies:
fsevents "~2.3.2"
"chokidar@>=3.0.0 <4.0.0":
version "3.6.0"
resolved "https://mirrors.cloud.tencent.com/npm/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
dependencies:
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.2"
chownr@^2.0.0:
version "2.0.0"
resolved "https://mirrors.cloud.tencent.com/npm/chownr/-/chownr-2.0.0.tgz"
......@@ -2227,6 +2242,11 @@ image-size@~0.5.0:
resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
immutable@^4.0.0:
version "4.3.7"
resolved "https://mirrors.cloud.tencent.com/npm/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
indent-string@^4.0.0:
version "4.0.0"
resolved "https://mirrors.cloud.tencent.com/npm/indent-string/-/indent-string-4.0.0.tgz"
......@@ -3271,6 +3291,15 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass@^1.78.0:
version "1.78.0"
resolved "https://mirrors.cloud.tencent.com/npm/sass/-/sass-1.78.0.tgz#cef369b2f9dc21ea1d2cf22c979f52365da60841"
integrity sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
sax@^1.2.4:
version "1.2.4"
resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
......@@ -3396,6 +3425,11 @@ snake-case@^3.0.4:
dot-case "^3.0.4"
tslib "^2.0.3"
"source-map-js@>=0.6.2 <2.0.0":
version "1.2.1"
resolved "https://mirrors.cloud.tencent.com/npm/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
......