element-ui loading加載組件的使用與樣式配色

loading：用於加載數據時顯示的動效

調用方法分為指令與服務，由於服務並不常用故主要講解通過指令調用加載組件的方法

loading組件的官方網址：https://element.eleme.cn/#/zh-CN/component/loading

指令

自定義指令為v-loading，只需要綁定Boolean即可。

v-loading="loading"		loading為true則顯示加載動效，為false則不顯示加載動效
自定義加載文案，圖表，背景色
element-loading-text="拼命加載中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
當需要全屏加載則添加fullscreen修飾符
v-loading.fullscreen="loading" 
若需要鎖定屏幕的滾動，可以使用lock修飾符
v-loading.lock="loading"

實例

<template>
  <div class="app-container">
    <div class="the-container">
      <el-table
        ref="multipleTable"
        v-loading.fullscreen.lock="loading"
        element-loading-text="加載中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        height="100%"
      >
        <el-table-column
          prop="date"
          label="日期"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="checkRow(scope)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }],
      loading: false
    }
  },
  created() {
    this.getTableList()
  },
  mounted() {
    this.loading = true
  },
  methods: {
    checkRow(scope) {
      console.log(scope)
      console.log(scope.row)
    },
    // 用於測試加載組件的方法，延遲一秒后加載消失
    getTableList() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        console.log(this)
      }, 1000)
    }
    // 正常開發調用的方法，待數據傳入后加載組件消失。
    // getTableList1() {
    //   this.loading = true
    //   Api.getTable()
    //     .then((data) => {
    //       this.tableData = data
    //     })
    //     .catch((error) => {
    //       console.log(error)
    //     })
    //     .then(() => {
    //       this.loading = false
    //     })
    // }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    height: 100%;
    background-color: #fff;
    padding: 20px;
  }

</style>

樣式配色

配色的方式有三種：十六進制色，rgb(),rgba()

十六進制色

格式為： #_ _ _
分為3組6位十六進制數       
三組分別代碼red、green、blue
每一組的數值 00-ff  代表由淺到深
eg:#ffffff 是白色因為紅綠藍三種純色混合為白色

rgb()與rgba()

由於rgba()其各個字母表示的意思與rgb()一致，這里就只講rgba()。
R -red紅色     0-255之間的整數  表示顏色中紅色的成分
G -green綠色   0-255之間的整數  表示顏色中綠色的成分
B -blue藍色    0-255之間的整數  表示顏色中藍色的成分
A -alpha透明度 0-1之間的數值    數值越小，透明度越高