首页 > 其他 > 详细

ant design of vue 组件使用

时间:2020-06-04 13:38:13      阅读:93      评论:0      收藏:0      [点我收藏+]

1、表格

1)分页表格

<template>
  <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" :pagination="ipagination"/>
</template>
<script>
  const columns = [
    {itle: ‘Name‘,dataIndex: ‘name‘},
    {title: ‘Age‘,dataIndex: ‘age‘},
    {title: ‘Address‘,dataIndex: ‘address‘}
  ]

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

  export default {
    data () {
      return {
        data,
        columns
        ipagination: {
          current: 1,
          pageSize: 10,
          total: data.length,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: [‘10‘,‘20‘,‘30‘],  //这里注意只能是字符串,不能是数字
          showTotal: (total, range) => `显示${range[0]}-${range[1]}条,共有 ${total}条`
        }
      }
    }
  }
</script>

ant design of vue 组件使用

原文:https://www.cnblogs.com/xidianzxm/p/13042298.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!