当前位置：首页 > news >正文

vue3中＜el-table-column＞状态的显示

news 来源：原创 2025/5/15 17:52:58

方法 1：使用作用域插槽 + `<el-tag>` 标签

<template>
  <el-table :data="tableData">
    <!-- 其他列 -->
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
          {{ row.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const tableData = [
  { id: 1, name: '数据1', status: 1 },
  { id: 2, name: '数据2', status: 0 },
  // ...
]
</script>

方法 2：使用 `formatter` 格式化显示

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="status"
      label="状态"
      :formatter="statusFormatter"
    ></el-table-column>
  </el-table>
</template>

<script setup>
const statusFormatter = (row) => {
  return row.status === 1 ? '启用' : '禁用'
}
</script>

自定义颜色样式

如果需要更个性化的样式，可以自定义 CSS 类名：

<template>
  <el-table-column prop="status" label="状态">
    <template #default="{ row }">
      <span :class="['status-label', row.status === 1 ? 'active' : 'inactive']">
        {{ row.status === 1 ? '启用' : '禁用' }}
      </span>
    </template>
  </el-table-column>
</template>

<style>
.status-label.active {
  color: #67C23A;
  font-weight: bold;
}
.status-label.inactive {
  color: #F56C6C;
  font-style: italic;
}