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

Posted bingchenzhilu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于Ant Design Vue创建的vue项目中表格组件的使用相关的知识,希望对你有一定的参考价值。

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

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

2

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

  其中:columns表示的是表头:

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赋值

 pagination: {
        pageSize: 6,
        current: 1,
        total: 0
},
pageChange:翻页,再次调用查询接口,传入相应页码,页面数据条数即可
 pageChange(pagination) {
      this.pagination = pagination
      this.select()
}
loading是加载动画。当数据未显示的时候可以使用loading为true,待获取到数据,改为false即可
插槽使用:
1  <div slot="action" slot-scope="text, record">----------record即每条数据,相当于v-for中定义的item,如有编辑操作,则根据需要传递值
2         <template>
3           <a @click="Delete(record)" style="color:#DC322F;">删除</a>
4         </template>
5   </div>

 

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

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

以上是关于基于Ant Design Vue创建的vue项目中表格组件的使用的主要内容,如果未能解决你的问题,请参考以下文章

基于vue Ant-Design 的表单设计器,快速开发

ant-design-vue:基础使用

Vue+Ant design vue安装及配置使用

第一个 Vue + Ant-Design-Vue 小项目跑起来

vue按需引入ant-design-vue报错解决方案

vue + ant-design-vue 项目兼容IE11浏览器(血泪踩坑)