pms-iot-vue/src/components/custom-components/kv-vue/index.vue

<template>
  <table class="w-1/1 h-1/1 kvTable">
    <colgroup>
      <col class="kvKeyCol" />
      <col class="kvValueCol" />
    </colgroup>
    <tbody>
      <tr>
        <td class="kvKey kvKeyValue" colspan="1">{{ props.label }}</td>
        <td class="kvValue kvKeyValue" colspan="1">{{ props.value }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
const props = defineProps({
  fontFamily: {
    type: String,
    default: ''
  },
  fontSize: {
    type: Number,
    default: 15
  },
  label: {
    type: String,
    default: ''
  },
  labelWidth: {
    type: Number,
    default: 50
  },
  value: {
    type: String,
    default: ''
  },
  valueWidth: {
    type: Number,
    default: 50
  },
  color: {
    type: String,
    default: ''
  },
  border: {
    type: Boolean,
    default: true
  },
  borderColor: {
    type: String,
    default: ''
  }
})
</script>
<style scoped>
.kvTable {
  border: v-bind('`${props.border?1:0}px solid ${props.borderColor}`');
  table-layout: fixed;
  border-collapse: collapse;
}

.kvKeyCol {
  width: v-bind('`${props.labelWidth}px`');
}

.kvValueCol {
  width: v-bind('`${props.valueWidth}px`');
}

.kvKeyValue {
  font-family: v-bind('`${props.fontFamily}`');
  font-size: v-bind('`${props.fontSize}px`');
  color: v-bind('`${props.color}`');
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kvKey {
  border-right: v-bind('`${props.border?1:0}px`') solid v-bind('`${props.borderColor}`') !important;
}
</style>