element-ui 表格拓展

对表格数据的过滤：比如性别返回的是 0 和 1 ，所以需要对0和1 分别进行处理   渲染想要的结果

table-colun提供了一个 slot 插槽功能，内容可以 拓展自定义内容

<template slot-scope="Sex">
          <div>
            {{getSex(Sex.row.sex)}}
          </div>
</template>

例：APP.vue

  <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">
        <template slot-scope="Name">
          <div>
            {{Name.row.name}}
          </div>
        </template>

      </el-table-column>

      <el-table-column
        prop="sex"
        label="性别"
        width="180">
        <template slot-scope="Sex">
          <div>
            {{getSex(Sex.row.sex)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
        <template slot-scope="scope">
          <div>{{scope.row.age}} 岁</div>
        </template>

      </el-table-column>
      <el-table-column
        prop="height"
        label="身高"
        width="180">
        <template slot-scope="scope">
          <div>{{scope.row.height}} cm</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="weight"
        label="体重"
        width="180">
        <template slot-scope="scope">
          <div>
            {{scope.row.weight}} kg
          </div>
        </template>
      </el-table-column>
      <el-table-column  prop="marry" label="婚否" >
        <template slot-scope="scope">
          <div >{{getMarry(scope.row.marry)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

<script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            sex:1,
            age:18,
            height:185,
            weight:85,
            marry:1,
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '张小虎',
            sex:0,
            age:21,
            height:180,
            weight:80,
            marry:2,
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '刘小虎',
            sex:1,
            age:20,
            height:175,
            weight:75,
            marry:1,
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            sex:0,
            age:22,
            height:170,
            weight:70,
            marry:2,
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods:{
        getSex(val){
          if(val == 1){
            return '男'
          }else{
            return '女'
          }
        },
        getMarry(val){
          if(val == 1){
            return '已婚'
          }else{
            return '未婚'
          }
        }
      }
    }
  </script>
<style>

</style>