a-table及相关组件的使用

a-table及相关组件的使用

基础的渲染

参数名	类型	说明
dataSource	数组	数据来源，数组中的每一个对象都是一行的数据
columns	数组	用来指定每一列的标题（表头）
bordered	布尔值	是否显示表格边框，默认为竖向的边框
pagination	布尔值	默认采用他的分页，如果觉得不好用可以自己写
rowKey	具有唯一性	给每一行一个特殊标记，不给同时没给key(每一列的特殊标记)浏览器会报错
rowClassName	函数	对行进行处理，function(record,index){}

显示结果：

常见功能及效果：

表头文字处理

使用的是slots:{ title:“自己给插槽取个名字” }；同过具名插槽，在列当中slots给插槽取名字, 在对应插槽中定义标题的内容及样式

详情可间上面代码

表格文字处理

通过 scopedSlots { customRender:“自己取个名字” }，可在对应插槽内对该列进行处理

详情可间上面代码

隔行变色

 addClassName: (record, index) => {

        let rowClassName = 'green'

        if (index % 2 === 0) {

          rowClassName = 'blue'

        }

        return rowClassName

      }

分页

1 pagination设置为true的

2 利用 自己定义样式

我经常用的一个分页

 


        

        共 {{ totalRecord }}条

      

筛选与排序

1 利用antd自带的表格筛选与排序，只能够对当前页的数据进行筛选与排序，意义不大，用得很少

2 利用请求来进行所有数据的排序

 


        

        共 {{ totalRecord }}条

      

筛选与排序

1 利用antd自带的表格筛选与排序，只能够对当前页的数据进行筛选与排序，意义不大，用得很少

2 利用请求来进行所有数据的排序
自己定义筛选样式会可以到组件a-checkbox-group与a-checbox
a-checkbox-group

参数名	类型	说明
change	chage事件	当每个选项发生改变，他都会将目前被勾选的参数传递过来
value	数组	用来指定被选择的项，就是被选择项的数组，反过来在它绑定的数组中就会呈现打勾的状态

a-checbox 可作为a-checkbox-group的每一个选择项

参数名	类型	说明
value	字符串或数字	每一个选项绑定的值 ，一般会作为请求的参数

序号列

1 如果请求有返回序号，直接将dataIndex与之绑定
2 没有，自己定义; (当前页-1)*每页展示的条数+索引+1

render:()=>{ return (currentPage-1)*pageSize+index+1}