vue中表格中列属性自定义赋值，以及slot-scope=“scope”，以及row的用法

1、背景介绍

例如当我们从数据库获得一条条记录时，我们根据这条记录的一个状态码展示不同的状态信息，我们可以根据这个状态码对表格动态的自定义的赋值操作。
例如：数据库的状态0表示表示未提交，1表示正常，2表示异常，3表示逾期，我们可以根据这个状态嘛结合v-if标签动态的给表格展示出不同的信息。

效果展示：
（图上数据仅是测试需要随机输入，没有任何依据来源）

2、我们需要借助使用 < template slot-scope=“scope” >< /template>标签

2.1、html5中的template标签

html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。

2.2、slot-scope=“scope”

这里获取到的是给这个表格赋值的这个对象，scope.row能够获取到这一行的所有数据，例如可以根据scope.row.enterpriseName拿到这一行的企业名称的数据

3、代码展示

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
          label="上报状态"
          align="center"
          width="120"
      >
        <template slot-scope="scope" >
          <span v-if="scope.row.reportStatus==2">
            <el-button @click="updateReportStatus(scope.row)" type="warning" style="width: 90px" round>异常</el-button>
          </span>
          <span v-if="scope.row.reportStatus==1">
            <el-button type="success" style="width: 90px" round>正常</el-button>
          </span>
          <span v-if="scope.row.reportStatus==0">
            <el-button type="info" style="width: 90px" round>未上报</el-button>
          </span>
          <span v-if="scope.row.reportStatus==3">
            <el-button type="danger"  style="width: 90px;" round>逾期未上报</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>   
  </template>

效果图：

3.1、自定义赋值以及v-if的使用

v-if的使用场景：
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换

自定义赋值：我们通过scope.row.reportStatus获取到当前行的这个状态的信息，根据不同的状态信息结合v-if的使用展示不同的信息，可以做到表格每一行的属性的自定义赋值