element中table插槽使用，根据后台数据动态显示内容

处理table中的数据，并添加对应的数据,利用插槽(后台数据返回的是0和1，根据0和1，来决定显示对应的图片)

<el-table-column
          prop="jsState"
          label="泵状态"
          align="center"
          width="240"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.jsState" :key="index" class="bzt">
                <span :class="index < '9' ? 'num' : 'num1'">{{ index + 1 }}</span>
                <img src="./images/red.svg" alt="" v-if="item == '1'" />
                <img src="./images/green.svg" alt="" v-if="item != '1'" />
            </div>
          </template>
</el-table-column>

对应css

.bzt{
        position: relative;
        width: 18px;
        height: 18px;
        display: inline-block;
        .num{
          position: absolute;
          top: -2px;
          left: 5px;
          font-size: 13px;
          color: white;
        }
        .num1{
          position: absolute;
          top: -2px;
          left: 2px;
          font-size: 13px;
          color: white;
        }
}