el-table中带状态的文字简单封装

1. 创建组件 StatusText.vue

<template>
  <div flex items-center relative>
    <div
      w-5px
      h-5px
      m-r-7px
      rounded-full
      :style="{ backgroundColor: color }"
    ></div>
    <span :style="{ color: color }">{{ text }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    required: true,
  },
  text: {
    type: String,
    default: "",
  },
});
</script>

2. 引入使用

import StatusText from "@/components/StatusText.vue";

<el-table-column prop="" label="状态">
  <template #default="scope">
    <StatusText
      v-if="scope.row.status === 1"
      color="#00BF36"
      text="成功"
    />
    <StatusText
      v-else-if="scope.row.status === 2"
      color="#FF0000"
      text="失败"
    />
    <StatusText v-else color="#aaa" text="进行中" />
  </template>
</el-table-column>

import StatusText from "@/components/StatusText.vue";