机制: 作用域插槽

例子1:

1. 需求:

后端给到我们前端的是一个数字类型的状态码(1, 2)，每一个状态码对应有中文说明。我

们通过枚举的方式转换成文字即可 ,也就是说把1转换成’正式’

                        ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624963689320-0c7dab6a-98c1-4dc8-8607-e2460c2bcc9d.png#clientId=u5eb916bf-b608-4&from=paste&height=243&id=uaecb4e6e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=243&originWidth=410&originalType=binary&ratio=1&size=22377&status=done&style=none&taskId=u34115d44-ac72-4fc7-997a-0179bae6326&width=410)

2.操作:

把资料复制到项目中 (src/constant)

枚举数据存放于我们提供的资源/枚举中，可以将枚举下的constant文件夹复制到src/文件夹下。

  <br />                                                           ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624964955647-9f8796ca-9ceb-4ea3-a7bf-a5b9de5c3064.png#clientId=u5eb916bf-b608-4&from=paste&height=232&id=u88449ec2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=232&originWidth=172&originalType=binary&ratio=1&size=5884&status=done&style=none&taskId=u4a999168-bd30-443a-8acc-7e2cc468999&width=172)

3.代码实现:

步骤1: 导入页面组件使用

                ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624964998392-cc56eec6-14ec-4591-b5c1-cb0e865c5ea4.png#clientId=u5eb916bf-b608-4&from=paste&height=62&id=u6e1a71d1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=62&originWidth=318&originalType=binary&ratio=1&size=4240&status=done&style=none&taskId=u1c67de0e-e7cb-4580-877a-45272edffe5&width=318)

步骤2: 在组件里面用作用域插槽,然后自定义一个内容

              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624965149079-87123c35-aede-4051-ad8e-98677e238144.png#clientId=u5eb916bf-b608-4&from=paste&height=116&id=u49eafd13&margin=%5Bobject%20Object%5D&name=image.png&originHeight=116&originWidth=454&originalType=binary&ratio=1&size=11168&status=done&style=none&taskId=u634da579-2eb2-4d19-9dbc-47b124a94e7&width=454)

步骤3:

a) 把自定义的内容 进行格式化:

打印出来的结果就是: {1:’正式’ , 2:’非正式’}

b) 在methods方法里面使用:

                         ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624965346729-3d2df138-01ae-4401-bde3-e856da66e2fe.png#clientId=u5eb916bf-b608-4&from=paste&height=80&id=ude244779&margin=%5Bobject%20Object%5D&name=image.png&originHeight=80&originWidth=250&originalType=binary&ratio=1&size=4370&status=done&style=none&taskId=ud73ba97f-c240-4ece-b2ab-d9a7911bd2b&width=250)

原理: 把数组转成 obj:{‘1’:’正式’, ‘2’:’非正式’}，然后用obj[“1”]

例子2:

1. 需求:

        后端返回的数据中，只有一个指代性别的编码，为了方便用户查看，需要我们把1转换成男，0转换成女。<br />                              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624962757381-54d3d8c4-d18b-4782-8cd7-c52da052539f.png#clientId=u1969b1ec-b7c4-4&from=paste&height=215&id=ud59b026e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=215&originWidth=383&originalType=binary&ratio=1&size=8659&status=done&style=none&taskId=u17004497-9b13-4f55-832e-ceb0bbaffec&width=383)

2. 代码

                          ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624962796516-7f51a4c2-eac9-453d-9d8d-7de6791fe9be.png#clientId=u1969b1ec-b7c4-4&from=paste&height=342&id=u224d4834&margin=%5Bobject%20Object%5D&name=image.png&originHeight=342&originWidth=359&originalType=binary&ratio=1&size=15609&status=done&style=none&taskId=ucea851ff-a709-4140-8702-35cfa7249ca&width=359)

<el-table-column label="性别">
    <template slot-scope="scope">
      {{ transGender(scope.row.gender) }}
    </template>
</el-table-column>
<script>
  export default {
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        }
      }
  }
</script>

3. 小结:

1. 场景：直接使用prop只能渲染文本，通过prop不能直接渲染的时，我们需要自定义内容渲染
2. 机制：作用域插槽
3. 
   

   3. 如何拿当前行的完整对象数据？ scope.row

        <br />