vue element-ui Loading加载事件的使用以及自定义Loading加载动画

elemen-ui官方使用

 <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%">

loading加载事件属性解释

element-loading-text

在绑定了

v-loading

指令的元素上添加

element-loading-text

属性，其值会被渲染为加载文案，并显示在加载图标的下方

element-loading-spinner

和

element-loading-background

属性分别用来设定图标类名和背景色值。

作为小白，这次主要记录的问题是，自定义element-ui loading 加载动画

网络查找，思路基本就是这么个思路

直接在全局样式文件中修改: 或者在 app.vue 文件中设置也可以

//index.scss      我这里是 index.scss 文件

//自定义 加载动画
.el-loading-spinner {
  background-image:url('../assets/loading_images/loading.gif');   // 这个是自己想设置的 gif 加载动图
  background-repeat: no-repeat; //设置背景 图 不重复
  height:100%;
  background-position:center;  //设置背景 定位  为居中
  top:0;  //覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了
}
.el-loading-spinner .circular {
  display: none;  //隐藏 之前  element-ui  默认的 loading 动画
}

以及在项目中的使用

项目中封装了一个 TableBox 组件，其中控制加载动画的就是 ：loading="tableLoading"

    <table-box
      :headInfo="tableDataTitle"
      :data="tableData"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :loading="tableLoading"
      @evTurnPage="pageChange"
      @evClickButton="tableBtnClick"
      @evSelectionChange="handleSelectionChange"
    >

js 里设置动画的初始值

data() {
    return {
      tableLoading: false
    }
}

我们一般需要的功能都是在数据还没加载出来的时候，显示加载动画，也就是：tableLoading 设置为 true，待数据加载完成之后在设置 tableLoading 为 false

    // 加载数据
    loadData() {
      this.tableLoading = true;
      // 这里面是调用api获取数据展示
      this.tableData = [];
      const params = {
        page: this.pagination.page,
        page_size: this.pagination.limit,
        field: this.queryParam.type,
        value: this.queryParam.key,
        map: "map_drug"
      };
      APIDict.getListData(params)
        .then((res) => {
          try {
            res.data.data.forEach((item) => {
              this.tableData.push({
                id: item.id,
                drug_type1: item.drug_type1,
                drug_type2: item.drug_type2,
                drug_type3: item.drug_type3,
                drug_type4: item.drug_type4,
                drug_name: item.drug_name,
                dose_type: item.dose_type,
                isEdit: this.isEdit
              });
            });
            this.pagination.total = res.data.total;
            this.tableLoading = false;
          } catch (e) {
            this.$message({
              message: e.message,
              type: "error"
            });
          }
        })
        .finally(() => {});
    },