自定义的 Vue 3 Composition API 钩子，antd标签

1. 创建自定义钩子 useDeviceStatus.js：

import { computed } from 'vue';

export function useDeviceStatus(status) {
  const statusMap = computed(() => {
    const map = {
      0: { text: '闲置', color: '' },
      1: { text: '在用', color: 'blue' },
      2: { text: '待修', color: 'lime' },
      3: { text: '在修', color: 'cyan' },
      4: { text: '备用', color: 'red' },
      5: { text: '调剂', color: 'magenta' },
      6: { text: '待报废', color: 'warning' },
      7: { text: '报废', color: 'error' },
      8: { text: '带病运行', color: 'volcano' }
    };
    return map[status.value] || { text: '未知状态', color: 'default' };
  });

  return {
    statusMap
  };
}

2. 在组件中使用自定义钩子：

<script setup>
import { ref } from 'vue';
import { useDeviceStatus } from './useDeviceStatus.js';

const props = defineProps({
  status: {
    type: Number,
    required: true
  }
});

const { statusMap } = useDeviceStatus(ref(props.status));
</script>

<template>
  <a-tag :color="statusMap.color">{{ statusMap.text }}</a-tag>
</template>

3. 在表格中使用该组件：

<vxe-column field="device_status" title="设备状态">
  <template #default="{ row }">
    <DeviceStatusTag :status="row.device_status" />
  </template>
</vxe-column>

解释

• useDeviceStatus 是一个自定义的 Composition API 钩子，用于根据设备状态返回对应的文本和颜色。
• 在组件中，通过 useDeviceStatus 钩子获取状态映射，并在模板中使用 a-tag 来展示。