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;
}
相关推荐
Mr.app32 分钟前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code1 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
心宽体胖连壮实2 小时前
记录一次 MarchingSquaresJS 使用经历
vue.js
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
JiangJiang2 小时前
🚀 React 弹窗还能这样写?手撸一个高质量 Modal 玩起来!
前端·javascript·react.js
吃炸鸡的前端2 小时前
el-transfer穿梭框数据量过大的解决方案
前端·javascript
Monly213 小时前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
大名人儿3 小时前
【JS事件循环机制event-loop】
javascript·事件循环·宏任务·微任务·event-loop