fix table

This commit is contained in:
Qiuxia Fan 2022-03-17 20:04:42 +08:00
parent 28028dc378
commit 7e6913fdac
4 changed files with 20 additions and 5 deletions

View File

@ -104,6 +104,8 @@ const msg = {
import: "Import Dashboard Templates",
yes: "Yes",
no: "No",
tableHeaderCol1: "Name of the first column of the table",
tableHeaderCol2: "Name of the second column of the table",
hourTip: "Select Hour",
minuteTip: "Select Minute",
secondTip: "Select Second",

View File

@ -104,6 +104,8 @@ const msg = {
import: "导入仪表板模板",
yes: "是",
no: "否",
tableHeaderCol1: "表格的第一列的名称",
tableHeaderCol2: "表格的第二列的名称",
hourTip: "选择小时",
minuteTip: "选择分钟",
secondTip: "选择秒数",

View File

@ -75,4 +75,8 @@ function updateConfig(param: { [key: string]: unknown }) {
display: block;
margin-bottom: 5px;
}
.item {
margin-top: 10px;
}
</style>

View File

@ -21,13 +21,13 @@ limitations under the License. -->
:style="`width: ${nameWidth + initWidth}px`"
>
<div class="name" :style="`width: ${nameWidth}px`">
{{ config.tableHeaderCol1 || $t("name") }}
{{ config.tableHeaderCol1 || t("name") }}
<i class="r cp" ref="draggerName">
<Icon iconName="settings_ethernet" size="middle" />
</i>
</div>
<div class="value-col" v-if="config.showTableValues">
{{ config.tableHeaderCol2 || $t("value") }}
<div class="value-col" v-if="showTableValues">
{{ config.tableHeaderCol2 || t("value") }}
</div>
</div>
<div
@ -37,7 +37,7 @@ limitations under the License. -->
:style="`width: ${nameWidth + initWidth}px`"
>
<div :style="`width: ${nameWidth}px`">{{ key }}</div>
<div class="value-col" v-if="config.showTableValues">
<div class="value-col" v-if="showTableValues">
{{ data[key][data[key].length - 1 || 0] }}
</div>
</div>
@ -47,6 +47,7 @@ limitations under the License. -->
<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
/*global defineProps */
const props = defineProps({
data: {
@ -59,14 +60,20 @@ const props = defineProps({
tableHeaderCol2: string;
tableHeaderCol1: string;
}>,
default: () => ({}),
default: () => ({ showTableValues: true }),
},
});
/*global Nullable*/
const { t } = useI18n();
const chartTable = ref<Nullable<HTMLElement>>(null);
const initWidth = ref<number>(0);
const nameWidth = ref<number>(0);
const draggerName = ref<Nullable<HTMLElement>>(null);
const showTableValues = ref<boolean>(
props.config.showTableValues === undefined
? true
: props.config.showTableValues
);
onMounted(() => {
if (!chartTable.value) {
return;