Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-30 18:13:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

update: 表格组件添加阴影效果

Browse Source
This commit is contained in:
zhuoqinglian
2026-06-16 09:46:25 +08:00
parent 8a5dac181e
commit 45fd850757
1 changed files with 100 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/CustomTable.vue
+100 -93
View File
@@ -1,80 +1,82 @@
<template> <template>
<div class="custom-table-wrapper"> <div class="custom-table-wrapper">
<el-table <div class="table-container">
ref="tableRef" <el-table
:data="data" ref="tableRef"
:class="['custom-table', tableClass]" :data="data"
height="100%" :class="['custom-table', tableClass]"
v-loading="loading" height="100%"
:element-loading-text="loadingText" v-loading="loading"
:element-loading-spinner="loadingSpinner" :element-loading-text="loadingText"
:element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner"
:header-cell-class-name="headerCellClassName" :element-loading-background="loadingBackground"
:row-class-name="rowClassName" :header-cell-class-name="headerCellClassName"
@selection-change="handleSelectionChange" :row-class-name="rowClassName"
@row-click="handleRowClick" @selection-change="handleSelectionChange"
> @row-click="handleRowClick"
<!-- 选择列 -->
<el-table-column
v-if="showSelection"
width="55"
align="center"
label="选择"
> >
<template slot-scope="scope"> <!-- 选择列 -->
<slot <el-table-column
v-if="$scopedSlots.selection" v-if="showSelection"
name="selection" width="55"
:row="scope.row" align="center"
:$index="scope.$index" label="选择"
/> >
<el-checkbox <template slot-scope="scope">
v-else <slot
:value="scope.row.selected" v-if="$scopedSlots.selection"
@change="handleCheckboxChange(scope.row)" name="selection"
/> :row="scope.row"
</template> :$index="scope.$index"
</el-table-column> />
<el-checkbox
<!-- 动态列 --> v-else
<el-table-column :value="scope.row.selected"
v-for="column in columns" @change="handleCheckboxChange(scope.row)"
:key="column.prop" />
:prop="column.prop"
:label="column.label"
:width="column.width"
:min-width="column.minWidth"
:align="column.align || 'center'"
:show-overflow-tooltip="column.showOverflowTooltip !== false"
>
<template slot-scope="scope">
<!-- 自定义插槽：优先使用 column.slot 指定的插槽名，否则用 column.prop 作为插槽名 -->
<slot
v-if="$scopedSlots[column.slot] || $scopedSlots[column.prop]"
:name="column.slot || column.prop"
:row="scope.row"
:$index="scope.$index"
:column="column"
/>
<!-- 默认显示 -->
<template v-else>
{{ scope.row[column.prop] }}
</template> </template>
</template> </el-table-column>
</el-table-column>
<!-- 操作列 --> <!-- 动态列 -->
<el-table-column <el-table-column
v-if="showOperations" v-for="column in columns"
:label="operationsLabel" :key="column.prop"
align="center" :prop="column.prop"
:width="operationsWidth" :label="column.label"
> :width="column.width"
<template slot-scope="scope"> :min-width="column.minWidth"
<slot name="operations" :row="scope.row" :$index="scope.$index" /> :align="column.align || 'center'"
</template> :show-overflow-tooltip="column.showOverflowTooltip !== false"
</el-table-column> >
</el-table> <template slot-scope="scope">
<!-- 自定义插槽：优先使用 column.slot 指定的插槽名，否则用 column.prop 作为插槽名 -->
<slot
v-if="$scopedSlots[column.slot] || $scopedSlots[column.prop]"
:name="column.slot || column.prop"
:row="scope.row"
:$index="scope.$index"
:column="column"
/>
<!-- 默认显示 -->
<template v-else>
{{ scope.row[column.prop] }}
</template>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column
v-if="showOperations"
:label="operationsLabel"
align="center"
:width="operationsWidth"
>
<template slot-scope="scope">
<slot name="operations" :row="scope.row" :$index="scope.$index" />
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 --> <!-- 分页 -->
<div class="table-footer"> <div class="table-footer">
@@ -241,30 +243,35 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
overflow: hidden; .table-container {
.custom-table { height: 100%;
width: 100%; width: 100%;
border: 1px solid #eef3fd; box-shadow: 0 2px 12px rgba(74, 124, 253, 0.12);
border-bottom: none;
border-radius: 6px; border-radius: 6px;
.el-table__body-wrapper { .custom-table {
overflow-y: auto; width: 100%;
&::-webkit-scrollbar { border: 1px solid #eef3fd;
width: 6px; border-bottom: none;
border-radius: 6px;
.el-table__body-wrapper {
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #a1c9fd;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: #f0f3fe;
border-radius: 3px;
}
} }
&::-webkit-scrollbar-thumb { .el-table__header {
background: #a1c9fd; th {
border-radius: 3px; color: #342f45;
} background: #edf2fc !important;
&::-webkit-scrollbar-track { }
background: #f0f3fe;
border-radius: 3px;
}
}
.el-table__header {
th {
color: #342f45;
background: #edf2fc !important;
} }
} }
} }