Vue3 Element-plus中el-table列sex值转男女显示的实现方法

方法1：利用列的formatter属性（最推荐） #

el-table-column自带formatter属性，专门用于格式化单元格内容，写个简单的转换函数就能搞定：

<el-table :data="userList">
  <el-table-column prop="sex" label="性别" :formatter="formatSex" />
</el-table>

<script setup>
// 模拟从数据库获取的原始数据
const userList = [
  { id: 1, sex: 1, name: '张三' },
  { id: 2, sex: 2, name: '李四' },
  { id: 3, sex: 0, name: '王五' } // 兼容异常值
]

// 性别转换函数
const formatSex = (row, column, cellValue) => {
  switch(cellValue) {
    case 1: return '男'
    case 2: return '女'
    default: return '未知'
  }
}
</script>

方法2：使用表格插槽自定义内容 #

如果需要给性别加样式（比如不同性别用不同颜色），用插槽会更灵活：

<el-table :data="userList">
  <el-table-column label="性别">
    <template #default="{ row }">
      <span :class="row.sex === 1 ? 'male-text' : 'female-text'">
        {{ row.sex === 1 ? '男' : row.sex === 2 ? '女' : '未知' }}
      </span>
    </template>
  </el-table-column>
</el-table>

<style scoped>
.male-text { color: #3b82f6; }
.female-text { color: #ec4899; }
</style>

方法3：提前转换原始数据 #

如果后续多处要用到转换后的性别，建议在获取数据时直接处理字段：

<script setup>
import { ref, onMounted } from 'vue'

const userList = ref([])

onMounted(async () => {
  // 模拟接口请求获取数据
  const rawData = await fetchUserList()
  // 遍历转换sex字段
  userList.value = rawData.map(item => ({
    ...item,
    sex: item.sex === 1 ? '男' : item.sex === 2 ? '女' : '未知'
  }))
})

// 模拟接口函数
const fetchUserList = () => {
  return Promise.resolve([
    { id: 1, sex: 1, name: '张三' },
    { id: 2, sex: 2, name: '李四' }
  ])
}
</script>

<el-table :data="userList">
  <el-table-column prop="sex" label="性别" />
</el-table>

为什么你之前用v-if没成功？ #

你大概率是把v-if写在了el-table-column标签上，这种写法是控制整个列的显示/隐藏，而非单元格内容的判断。要实现内容转换，需要把v-if放在插槽内部的元素上，比如：

<el-table-column label="性别">
  <template #default="{ row }">
    <span v-if="row.sex === 1">男</span>
    <span v-else-if="row.sex === 2">女</span>
    <span v-else>未知</span>
  </template>
</el-table-column>

这种写法也能生效，但不如前面的方法简洁高效。

内容的提问来源于stack exchange，提问作者Trottenheimer