#vue# 纯手写“页面数据为空时，显示空状态图片”

需求：在我们的页面，没有显示任何数据时，显示图片以及提示语

效果：

 

 后端接口数据

思路：

（1）只需要在页面里面加入一个div，当页面里面的数据为0时，就用v-show展示出来（就是当页面没有数据的时候，就显示这个图片）

（注意，这个空状态的div需要放在具体呈现的位置进行排版）

//（2）设置一个变量，例如totalNum ，在js的data板块先把变量totalNum设置为0，就是先不展示出来

（3）最后一步，就是让我们的变量totalNum 全等于 0（就是没有数据的时候）才显示出来，那么就将我们这个变量等于我们的数据接口里面的length（长度）就可以了，如果后端接口里面是有数据的，那么就说明length是有长度的那么就不会显示我们的空状态图片

注：由于我们这个后端接口里面，没有条数这个参数，所以在设置时，让变量等于length就可以了
在平时的话，就优先先考虑看看有没有条数（total_number）

demo代码如下：

<template>
    <div>
       <el-button class="state-text"
            @click="getLiveBack(item.id)"
            type="primary">
           <span>回放设置</span>
      </el-button>
      <el-drawer
          title="回放列表"
          :visible.sync="drawer"
          :direction="direction"
          :with-header="true">
          <aliyun-upload @file-success = "handleFileSuccess">
          <button class="edu-submit-btn upload-btn">+上传回放</button>
        </aliyun-upload>

//（1）下面这个类名为nodata的div 就是当页面没有数据的时候，就显示这个图片
自己设置一个变量totalNum ，使用v-show进行显示及隐藏

          <div class="nodata" v-show="totalNum === 0">  
            <img src="@/assets/img/empty.png">
            <p>暂无回放！</p>
          </div>

      <backplay-item v-for="videos in liveBackVideos" :key="videos.id"
           :item-title = "videos.title"
           :item-duration = "videos.duration | getTimeText"
           :start-time = "videos.start_time"
           :end-time = "videos.end_time"
           :can-download = 'true'
           :video-id = "videos.video_id"
           @del-item = "delItem"
           @show-item = "showVideo(videos.video_id)">
        </backplay-item>
    </el-drawer>
</template>
<script>
     data () {
        return {
            totalNum:0 //（2）先把变量totalNum设置为0，就是先不展示出来
        }
    },
    methods:{
        getLiveBack(liveId) {
            //回放列表
            recordList({
                live_id:liveId
            }).then(res => {
                this.liveBackVideos = res.data;
                this.totalNum = res.data.length; 
//（3）最后一步，就是让我们的变量totalNum 全等于 0（就是没有数据的时候）才显示出来，那么就将
我们这个变量等于我们的数据接口里面的length（长度）就可以了，如果后端接口里面是有数据的，那么就说明length是有长度的那么就不会显示我们的空状态图片

注：由于我们这个后端接口里面，没有条数这个参数，所以在设置时，让变量等于length就可以了
在平时的话，就优先先考虑看看有没有条数（total_number）

                this.drawer = true;
                this.liveId = liveId
            })
        }
      }
</script>
<style>
    
.state-btn .state-text {
    display: inline-block;
    height: .24rem;
    line-height: .24rem;
    font-size: .16rem;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    @extend .edu-active-color;
    padding: .11rem .24rem 0 .04rem;
    background-color: transparent;
    border: 0 solid transparent;
    outline: none;

}
.state-btn .state-text span {
    color: #2158C7;
}
    
.nodata {
    width: 2.88rem;
    height:2.11rem;
    margin: 1rem auto;
}

.nodata img {
    width: 100%;
    height: 100%;
}
.nodata p {
    font-size: .14rem;
    color: #666666;
    text-align: center;
    padding-top: .1rem;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: 400;
}

</style>