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

方法 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; }