vue3中<el-table-column>状态的显示

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

javascript 复制代码
<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 格式化显示

javascript 复制代码
<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 类名:

javascript 复制代码
<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;
}
相关推荐
与妖为邻17 分钟前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。1 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴1 小时前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶2 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js
Heidi__4 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
夏之小星星4 小时前
element-ui自制树形穿梭框
前端·javascript·ui·elementui·vue
Monly216 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
我自纵横20237 小时前
使用 JavaScript 动态设置 CSS 样式
开发语言·前端·javascript·css·html·json·html5
leluckys7 小时前
flutter 专题 六十八 Flutter 多图片上传
前端·javascript·flutter
Enti7c7 小时前
数据一键导出为 Excel 文件
前端·javascript·excel·jquery