基于Ant Design Vue创建的vue项目中表格组件的使用

近期项目中使用到了ant design，下面来讲一下里面table组件的使用

1.基础：引入ant-design-vue组件

2

?

1 2 3 4 5 6 7 8 9

<a-table    v-else    :columns="columns"    :dataSource="data"    :pagination="pagination"    @change="pageChange"    :loading='loading'    >  </a-table>

　　其中：columns表示的是表头：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

const columns = [   {     title: '姓名',     key: 'name ',     dataIndex: 'name',-------需要和后台返回的数据同名     align: 'center',     width: '30%'----宽度，可以指定也可以直接为数值   },   {     title: '电话',     key: 'phone',     dataIndex: 'phone',     align: 'center',     width: '30%'   },   {     title: '操作',     key: 'action',     scopedSlots: { customRender: 'action' },--------后台返回的对象，数组，或者删除编辑操作，不便直接展示-------此处即表示渲染action插槽     align: 'center',    width: '30%'   } ]

　　dataSource:表示返回的数据，将后台返回的数据赋值即可

　　pagination:设置当前的currentPage(当前页码),pageSize（每页数据条数）,total（数据总条数）下面是pagination的写法，可以在请求数据的时候，传入相应的值同时为total赋值

?

1 2 3 4 5

pagination: {         pageSize: 6,         current: 1,         total: 0 },

?

1	pageChange：翻页，再次调用查询接口，传入相应页码，页面数据条数即可

 pageChange(pagination) {
      this.pagination = pagination
      this.select()
}

?

1	loading是加载动画。当数据未显示的时候可以使用loading为true,待获取到数据，改为false即可<br>插槽使用：

 <div slot="action" slot-scope="text, record">----------record即每条数据，相当于v-for中定义的item,如有编辑操作，则根据需要传递值
        <template>
          <a @click="Delete(record)" style="color:#DC322F;">删除</a>
        </template>
  </div>

 

  <span slot="address" slot-scope="text,record">
        {{record.time}}
        <br />
        {{record.address}}
  </span>

第一次使用这个框架，部分解决方法不够简便，只在于能够实现功能，如有高手。欢迎指正