ant design 表格columns配置解析

Posted 2023-04-27

参考技术A react项目中引入ant design的组件，配置项内容很多，功能也非常强大。

前三个基本项不做过多的说明，title表示列头显示文字，dataIndex列数据在数据项中对应的 key，key是你数据中相对应传入的属性。

render函数返回三个值（text, record, index）,text表示本项内容对应的value，record的值是一个object，里面存放了这一行数据的内容，index表示当行索引。箭头后面的内容trans(text) 表示真正要在table表格显示的数据，相当于一个过滤器，可以把后台数据拿到的值直接在此处转换。

width用来规定列宽，没有规定则自行根据内容显示列宽。官方文档有说明fixed: 'right'，固定在列表右侧，但是当列不够多的时候，会显示两个一样的列。fixed:true的效果同fixed: 'left'。

基于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>

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