给表格添加 loading 蒙层，解决表格 action 和 排序 并行操作导致的数据稳定问题

[ly525]

背景

标签：用户体验
介绍：vuetify 的表格里面，有一列 action，是 switch 切换（开关），点击切换的时候，会发起后端请求。与此同时，vuetify 的表格允许用户排序。

问题

我们发现运营在切换开关的时候（假设运营想 关闭 某个功能，前端发送打开或关闭的请求），在后端请求还没有返回，pending 的时候，运营同学可能会点击表头排序，发起了更新表格排序的请求（数据量较大，后端排序）。此时，切换开关的操作并未完成，数据库中的数据仍然是打开状态，前端在拿到排序后的数据的时候，更新表格（此时之前的开关操作有可能仍未完成）。这样就会把之前运营的关闭操作reset 了。运营此时就有点茫然了：我到底关闭成功了没？不知道

目前的解决方案：

运营在切换开关的时候，显示蒙层（loading 效果），蒙层要能保证运营能看到表格中的数据，只是此时不允许运营在对表格再做其他操作而已，但仍然能够正常查看数据。

演示效果

代码

vuetify: 2.x
element-ui: 2.11.1
vue cli3.x

稍微晚点补充一个 codepen 的 demo
下面的 demo 部分源码来自 Paginate and sort server-side

// src/mixins/mask-loading.js
import { Loading } from 'element-ui'
const defaultLoadingOptions = {
  background: 'rgba(255, 255, 255, 0.5)'
}

export default {
  data() {
    return {
      loadingInstance: null
    }
  },
  methods: {
    startMaskLoading(target, { background } = defaultLoadingOptions) {
      const loadingInstance = this.$refs.table && Loading.service({
        ...defaultLoadingOptions,
        target: target || this.$refs.table.$el,
        background
      })
      this.loadingInstance = loadingInstance
    },
    stopMaskLoading() {
      this.loadingInstance.close()
    }
  }
}

// xxx.table.vue
// 在有表格需要loading的地方，引入这个mixin
<template>
  <div>
    <v-data-table
      ref="table"
      :headers="headers"
      :items="desserts"
      :options.sync="options"
      :server-items-length="totalDesserts"
      :loading="loading"
      class="elevation-1"
    />
  </div>
</template>

<script>
import maskLoadingMixin from '@/mixins/mask-loading'

export default {
    mixins: [maskLoadingMixin],
    data () {
      return {
        totalDesserts: 0,
        desserts: [],
        loading: true,
        options: {},
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
      }
    },
    watch: {
      options: {
        handler () {
          // 在这里 start loading 
          this.startMaskLoading()
          this.getDataFromApi()
            .then(data => {
              this.desserts = data.items
              this.totalDesserts = data.total
              // 在这里停止 loading
              this.stopMaskLoading()
            })
        },
        deep: true,
      },
    },
    mounted () {
      this.getDataFromApi()
        .then(data => {
          this.desserts = data.items
          this.totalDesserts = data.total
        })
    },
    methods: {
      getDataFromApi () {
        this.loading = true
        return new Promise((resolve, reject) => {
          const { sortBy, descending, page, itemsPerPage } = this.options

          let items = this.getDesserts()
          const total = items.length

          if (this.options.sortBy) {
            items = items.sort((a, b) => {
              const sortA = a[sortBy]
              const sortB = b[sortBy]

              if (descending) {
                if (sortA < sortB) return 1
                if (sortA > sortB) return -1
                return 0
              } else {
                if (sortA < sortB) return -1
                if (sortA > sortB) return 1
                return 0
              }
            })
          }

          if (itemsPerPage > 0) {
            items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
          }

          setTimeout(() => {
            this.loading = false
            resolve({
              items,
              total,
            })
          }, 1000)
        })
      },
      getDesserts () {
        return [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%',
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%',
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%',
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%',
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%',
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%',
          },
        ]
      },
    },
  }
</script>