<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>
ant design of vue的table跑马灯的 效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 因为业务需求,需要设置文字的跑马灯效果,查阅相关资料后发现资料比较散乱,现整理如下: 1.单跑马灯效果(系统自带T...
- 在vue-cli中使用swiper实现匀速无缝滚动 效果图 1.安装vue-awesome-swiper 2.全局...