49 lines
991 B
Vue
49 lines
991 B
Vue
<template>
|
|
<section class="AiTable">
|
|
<u-table color="#333">
|
|
<u-tr>
|
|
<u-th v-for="(col,i) in colConfigs" :key="i" :width="col.width">{{ col.label }}</u-th>
|
|
</u-tr>
|
|
<u-tr v-for="(row,j) in data" :key="j">
|
|
<u-td v-for="(col,i) in colConfigs" :key="i" :width="col.width">
|
|
<slot v-if="col.slot" :name="col.slot" :row="row"/>
|
|
<p v-else-if="col.dict">{{ $dict.getLabel(col.dict, row[col.prop]) }}</p>
|
|
<p v-else>{{ row[col.prop] || "-" }}</p>
|
|
</u-td>
|
|
</u-tr>
|
|
</u-table>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "AiTable",
|
|
props: {
|
|
data: {default: () => []},
|
|
colConfigs: {default: () => []},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiTable {
|
|
border-radius: 8px;
|
|
min-height: 100px;
|
|
overflow: hidden;
|
|
|
|
.u-table, .u-th {
|
|
border-color: #D0D4DC !important;
|
|
}
|
|
|
|
.u-th {
|
|
background-color: #DFE6F4;
|
|
color: #646D7F;
|
|
}
|
|
|
|
.u-tr {
|
|
height: 80px;
|
|
}
|
|
}
|
|
</style>
|