99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
|
<script setup>
|
||
|
|
import { computed, onMounted } from "vue";
|
||
|
|
|
||
|
|
// 接收表格数据和类型的 props
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: "purple-pink", // 默认渐变颜色
|
||
|
|
},
|
||
|
|
});
|
||
|
|
// 根据 type 设置不同的渐变颜色（偶数行）
|
||
|
|
const evenClass = computed(() => {
|
||
|
|
switch (props.type) {
|
||
|
|
case "blue-green":
|
||
|
|
return "bg-teal-100/40";
|
||
|
|
// return 'bg-gradient-to-r from-blue-50 via-green-50 to-teal-50'
|
||
|
|
case "orange-yellow":
|
||
|
|
return "bg-gradient-to-r from-orange-50 via-yellow-50 to-yellow-100";
|
||
|
|
case "red-purple":
|
||
|
|
return "bg-gradient-to-r from-red-50 via-purple-50 to-purple-100";
|
||
|
|
default:
|
||
|
|
return "bg-gradient-to-r from-purple-50 via-pink-50 to-red-50";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 动态计算表头的背景颜色和文本颜色
|
||
|
|
const headerClass = computed(() => {
|
||
|
|
switch (props.type) {
|
||
|
|
case "blue-green":
|
||
|
|
return "bg-teal-200";
|
||
|
|
// return 'bg-gradient-to-r from-blue-200 via-green-200 to-teal-200'
|
||
|
|
case "orange-yellow":
|
||
|
|
return "bg-gradient-to-r from-orange-200 via-yellow-200 to-yellow-200";
|
||
|
|
case "red-purple":
|
||
|
|
return "bg-gradient-to-r from-red-200 via-purple-200 to-purple-200";
|
||
|
|
default:
|
||
|
|
return "bg-gradient-to-r from-purple-200 via-pink-200 to-red-200";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 斑马纹样式，偶数行带颜色，奇数行没有颜色，且从第二行开始
|
||
|
|
function zebraClass(index) {
|
||
|
|
return index % 2 === 1 ? evenClass.value : "";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="l-table overflow-x-auto">
|
||
|
|
<table
|
||
|
|
class="min-w-full border-collapse table-auto text-center text-size-xs"
|
||
|
|
>
|
||
|
|
<thead :class="headerClass">
|
||
|
|
<tr>
|
||
|
|
<!-- 插槽渲染表头 -->
|
||
|
|
<slot name="header" />
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr
|
||
|
|
v-for="(row, index) in props.data"
|
||
|
|
:key="index"
|
||
|
|
:class="zebraClass(index)"
|
||
|
|
class="border-t"
|
||
|
|
>
|
||
|
|
<slot :row="row" />
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 基础表格样式 */
|
||
|
|
th {
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 12px;
|
||
|
|
text-align: left;
|
||
|
|
border: 1px solid #e5e7eb;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表格行样式 */
|
||
|
|
td {
|
||
|
|
padding: 12px;
|
||
|
|
border: 1px solid #e5e7eb;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-spacing: 0;
|
||
|
|
}
|
||
|
|
.l-table {
|
||
|
|
@apply rounded-xl;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|