作用域插槽传值渲染的升级用法

平时后端传入的数据里，一般表示状态或性别什么的，不会用中文传入进来，那当我们获取到 0、1等数据的时候，如何处理呢？ 往下看 ~ 以下是效果图：

要求将性别里的0、1更改为 “男”、“女”。 性别 0 代表男 1 代表女

下面是一行简单的table运行代码：

<template>
  <el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column> 
  <el-table-column prop="name" label="姓名" width="180"> </el-table-column> 
  <el-table-column prop="address" label="性别"> </el-table-column> 
  </el-table> 
  </template> 
  <script> 
  export default { 
  data() { 
     return { 
      tableData: [   // 性别 0 代表男 1 代表女
  { date: '2016-05-02', name: '王小虎', gender: 0 }, 
  { date: '2016-05-04', name: '王小花', gender: 1 }, 
  { date: '2016-05-01', name: '张铁柱', gender: 0 },
  { date: '2016-05-03', name: '王翠花', gender: 1 }
       ]}
    } 
  } 
  </script>

第一种办法：作用于插槽---三元表达式

将属性prop删除，使用作用域插槽，绑定属性 v-slot="scope"

<el-table-column label="性别" width="180">
 <template v-slot="scope">
  {{ scope.row.gender === 0 ? '女' : '男' }}
 <template>
</el-teble-column>

升级方法：作用域插槽---使用函数

<el-table-column label="性别" width="180">
 <template v-slot="scope">
 {{ getGender(scope.row.gender) }}
 <template>
</el-teble-column>

<script> 
  getGender(genderCode) {
       const obj = {
       0:'男',
       1:'女'
     }
       return obj[genderCode]
   }
 </script> 

当然，你也可用在函数里用数组写法：

<script> 
  getGender(genderCode) {
     arr['男','女','婴儿']
       return arr[genderCode]
   }
 </script> 

也可以直接将数组写成一行代码：

<script> 
  getGender(genderCode) {
       return ['男','女','婴儿'][genderCode]
   }
 </script> 

那看到这里，你会询问，这个代码哪里高级一点了呢？ 在以上例子体验不出来高级的地方，但如果你后期数据增加了，你无需更改上面的代码，仅需在函数对象或数组里去添加属性和属性值就可以了！