ant design of vue的table跑马灯的 效果

<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        Reload
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    />
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Key',
    dataIndex: 'key',
    defaultSortOrder: 'ascend',
    sorter: (a, b) => a.key - b.key,
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i <8; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32+i,
    address: `London, Park Lane no. ${i}`,
  });
}

export default {
  data() {
    return {
      data,
      columns,
      checkIndex:0,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      timer:null
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  created(){
      this.selectedRowKeys.push(this.checkIndex)
  },
  methods: {
    start() {
      this.loading = true;
      if(data.length > this.checkIndex){    
          this.checkIndex ++
          this.selectedRowKeys = [this.checkIndex]    
          this.timer = setTimeout(() => {
            this.start()
          }, 1000)
      }else{
            this.loading = false;
            this.checkIndex = 0
            this.selectedRowKeys.length = 0;
            clearInterval(this.timer)
        }
      // ajax request after empty completing
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容