NGToolsAdmin/components/uni-stat-table/uni-stat-table.vue
2024-09-13 16:39:31 +08:00

72 lines
1.4 KiB
Vue

<template>
<uni-table :loading="loading" border stripe emptyText="暂无数据">
<uni-tr>
<block v-for="(mapper, index) in filedsMap" :key="index">
<uni-th v-if="mapper.title" :key="index" align="center">
<!-- #ifdef MP -->
{{mapper.title}}
<!-- #endif -->
<!-- #ifndef MP -->
<uni-tooltip>
{{mapper.title}}
<uni-icons v-if="tooltip && mapper.tooltip" type="help" color="#666" />
<template v-if="tooltip && mapper.tooltip" v-slot:content>
<view class="uni-stat-tooltip-s">
{{mapper.tooltip}}
</view>
</template>
</uni-tooltip>
<!-- #endif -->
</uni-th>
</block>
</uni-tr>
<uni-tr v-for="(item ,i) in data" :key="i">
<block v-for="(mapper, index) in filedsMap" :key="index">
<uni-td v-if="mapper.title" :key="index" align="center">
{{item[mapper.field] !== undefined ? item[mapper.field] : '-'}}
</uni-td>
</block>
</uni-tr>
</uni-table>
</template>
<script>
export default {
name: "uni-stat-table",
data() {
return {
};
},
props: {
data: {
type: Array,
default: () => {
return []
}
},
filedsMap: {
type: Array,
default: () => {
return []
}
},
loading: {
type: Boolean,
default: false
},
tooltip: {
type: Boolean,
default: false
}
}
}
</script>
<style>
.uni-stat-tooltip-s {
width: 160px;
white-space: normal;
}
</style>