Preface

Custom table colors 、 Style method sorting

1. Custom title color

:header-cell-style="{ background:'#121626' , color:'#606266' }"

Actual demonstration

2. Row color customization

• Method 1 Direct definition

:row-style="{backgroundColor:'#121626'}"

Actual demonstration

• Method 2 Dynamic colors

//  Component add 
:row-class-name="tableRowClassName"
//  Method area 
tableRowClassName({
     row, rowIndex}) {
    
      if (rowIndex === 1) {
    
        return 'redRow';
      } else if (rowIndex === 3) {
    
        return 'greenRow';
      }
      return '';
}

<style> .el-table .redRow {
    
    background: red;
  }

  .el-table .greenRow {
    
    background: green;
  }
</style>

Actual demonstration

3. Background color when there is no data

style="background-color:#121626; border: 1px solid rgb(41, 48, 77);"

effect

4. The table scrolls automatically

add to ref Parameters

/** *  Table scrolling  */
    rollTable () {
    
      //  Get the real after the form is mounted DOM
      const table = this.$refs.table
      //  Get the data in the table div Elements 
      const divData = table.bodyWrapper
      //  When you get the element , Timing the element to increase the distance from the top , Achieve scrolling effect ( This configuration is per 100 Millisecond movement 1 Pixels )
      setInterval(() => {
    
        //  The element increases from the top 1 Pixels 
        divData.scrollTop += 1
        //  Determine whether the element scrolls to the bottom ( Visual height + Distance from top = The whole height )
        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
    
          //  Reset table Distance from the top 
          divData.scrollTop = 0
        }
      }, 500)  //  Rolling speed 
    },

Actual demonstration

5. Remove scroll bars from tables and pages

/*  To scroll bar  */
<style lang="scss" scoped>
/*  To scroll bar  */
::-webkit-scrollbar {
    
  width: 0 !important;
  /* Width of scroll bar */
  height: 7px;
  /* Scroll bar height */
  background-color: rgb(0, 12, 46);
}
</style>

Effect demonstration