Bootstrap

element-ui里面的空数据图片

 1.判断表格的数据是否为空

<el-table  ref='table' :class='{"is-empty":!tableData.length}' :data='tableData'  height='100%'  border >
  <div slot='empty' class='empty'><img src='../../../assets/img/contract/no-data.png' alt=''></div>
</el-table>

2.在mount里面添加滚动条事件

 mounted() {
    // 获取需要绑定的table
    this.dom = this.$refs.table.bodyWrapper
    this.dom.addEventListener('scroll', () => {
      // 横向滚动距离
      let scrollLeft = this.dom.scrollLeft
      // 获取伪元素
      let scrollBar = document.getElementsByClassName('el-table__empty-block')[0]
      scrollBar.style.left = scrollLeft + 'px'
    })
  },

3.表格空图片样式

::v-deep {
  .is-empty {
    .el-table__body-wrapper {
      position: relative;

      .el-table__empty-block {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        height: 100% !important;

        .el-table__empty-text {
          width: 100% !important;
          height: 100% !important;
          .empty {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}

;