对话框中使用loading

注意：

before-close：关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog

一定要在对话框关闭前，把loading变为true,清空列表数据。否则loading只会出现一次，并且对话框会出现上一次的数据

<el-button @click="showSkuList(row)">查看</el-button>
 <!-- dialog框-SKU列表 -->
      <el-dialog :title="`${currentSpuName}的SKU列表`" :visible.sync="dialogTableVisible" :before-close="close">
        <el-table :data="skuList" v-loading="loading">
          <el-table-column property="skuName" label="名称"></el-table-column>
          <el-table-column property="price" label="价格"></el-table-column>
          <el-table-column property="weight" label="重量"></el-table-column>
          <el-table-column label="默认图片">
            <template slot-scope="{row,$index}">
              <img :src="row.skuDefaultImg" style="width:100px;height:100px"/>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>


export default {
  data() {
    return {
      skuList: [],
      loading:true,
    };
  },

methods: {
  // 查看SKU列表
    async showSkuList(row){
      this.dialogTableVisible = true;
       let result = await this.$API.spu.reqSkuList(row.id);
      if (result.code == 200) {
        this.loading = false;
        this.skuList = result.data;
      }
    },

  // 关闭对话框的回调
     close(done){
      this.loading = true;
      this.skuList = [];
      done();
    },
}