vue系列---【element ui 行内三元表达式的使用及实现行内switch按钮加文字】

<template>
  <el-table :data="tableData">
      <el-table-column prop="invChecked" label="审核状态">
          <template slot-scope="scope">
              <span>{{scope.row.invChecked==="0"?'未审核':(scope.row.invChecked==="1"?'未审核':(scope.row.invChecked==="2"?'已审核':""))}}</span>
          </template>
      </el-table-column>

      <el-table-column prop="isBind" label="操作" fixed="right" align="center">
          <template slot-scope="scope">
             <el-switch size="mini" class="table-switch" v-model="scope.row.isBind" active-color="#ff8f3e"  inactive-color="#ff8f3e" :active-value="1" :inactive-value="0" inactive-text="未关联"
            active-text="已关联"  @change="handleStatusChange(scope.$index, scope.row)"></el-switch>
          </template>
      </el-table-column>

  </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData:[],
        };
    },

}
</script>

<style lang="scss">
 .table-switch{
      .el-switch__label--left {
        position: relative;
        left: 45px;
        color: #fff;
        z-index: -1111;
      }
      .el-switch__core{
        width: 50px !important;
      }
      .el-switch__label--right {
        position: relative;
        right: 46px;
        color: #fff;
        z-index: -1111;
      }
      .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
      }
      .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
      }


}

</style>