a-table及相关组件的使用

基础的渲染

 <a-table :dataSource="tableList" :columns="tableColumns"></a-table>

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

<template><div><div class="box" style="width:600px;margin:50px"><a-table:dataSource="tableList":columns="tableColumns"bordered:pagination="false":rowClassName="rowClassName"><template slot="selfDefineTitle"><span>修后的标题(姓名列)</span></template><template slot="dealAge" slot-scope="text, record, index"><!-- 默认有三个参数，text为传给该列每个单元格中的数据，record为每一行的数据，index为改行索引 --><span>{{ index + '-' + '年龄为：' + text }}</span></template></a-table></div></div></template><script>export default {data() {return {tableList: [{id: 1,name: '张三',age: 20,hometown: '北京'},{id: 2,name: '李四',age: 20,hometown: '上海'},{id: 3,name: '王五',age: 23,hometown: '深圳'}],tableColumns: [{title: '序号', // 每一列对应的标题dataIndex: 'id', // 每一列对应的数据源中的数据width: 30, // 每一列的宽度align: 'center' // 每一列的对齐方式,left/center/right},{//   title: '姓名',slots: {//   给每一列的表头（标题）进行处理title: 'selfDefineTitle'},dataIndex: 'name',width: 100},{title: '年龄',dataIndex: 'age',scopedSlots: {// 对表格中的该列数据进行处理customRender: 'dealAge'},width: 100},{title: '家庭住址',dataIndex: 'hometown',width: 100}],rowClassName: (record, index) => {let rowClassName = 'green'if (index % 2 === 0) {rowClassName = 'blue'}return rowClassName}}}}</script><style>.green {background: rgb(76, 196, 86);}.blue {background: rgb(34, 90, 211);}</style>

显示结果：

常见功能及效果：

表头文字处理

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

详情可间上面代码

表格文字处理

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

详情可间上面代码

隔行变色

 <a-table :rowClassName="addClassName"></a-table>

 addClassName: (record, index) => {let rowClassName = 'green'if (index % 2 === 0) {rowClassName = 'blue'}return rowClassName}

<style>.green {background: rgb(76, 196, 86);}.blue {background: rgb(34, 90, 211);}</style>

分页

1 pagination设置为true的

2 利用自己定义样式

我经常用的一个分页

 <div class="page"><a-pagination v-model="currentPage" :total="totalRecord"></a-pagination><span class="total">共 {{ totalRecord }}条</span></div>

筛选与排序

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

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

 <div class="page"><a-pagination v-model="currentPage" :total="totalRecord"></a-pagination><span class="total">共 {{ totalRecord }}条</span></div>

筛选与排序

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}

a-table及相关组件的使用相关推荐

量子计算机模拟其他系统,一种量子计算机的模拟控制方法、系统及相关组件技术方案...
[技术实现步骤摘要] 一种量子计算机的模拟控制方法.系统及相关组件本专利技术涉及量子计算机控制领域,特别涉及一种量子计算机的模拟控制方法.系统及相关组件. 技术介绍近年来,随着量子计算技术发展迅速 ...
【前端】【cornerstone】如何使用segment分割相关组件
[前端][cornerstone]如何使用segment分割相关组件获取api 动作撤销获取分割数据 LABELMAP_MODIFIED 事件 cornerstone的文档写的确实是聊胜于无,其中 ...
《Cacti实战》——2.2　安装与配置相关组件和服务
本节书摘来自华章计算机<Cacti实战>一书中的第2章,第2.2节,作者:刘钊,张跃著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2.2 安装与配置相关 ...
【微信小程序经验】各类图表相关组件+Demo源码（折线图，柱状图，K线，分时图）
各类图表功能,小程序自带API并没有提供,所以很多人就用了其他方法来实现,我将这些实现方法和教程聚合一下,以便能够迅速而方便的使用: 相关文章: 在微信小程序中绘制图表(part1) 在微信小程序中绘 ...
使用C#调用GMap相关组件的基本步骤
首先,使用GMap组件需要如下三个库: 需要找到资源下载后,在解决方案资源管理器的"引用"中添加三个库. 之后在上方"工具"一栏的选择工具箱项中选择" ...
上期所API头文件四、ThostFtdcTraderApi.h--交易相关组件的定义（源代码6.3.19版）
交易相关组件的定义一.spi 1.1.以On...开头 1.2.以OnRsp...开头 1.3.以OnRtn...开头 1.4.以OnErrRtn...开头二.Api 2.1.Create... ...
微信小程序table表格自定义组件实现
效果 1. 左图是多列并且给了最大高度的效果. 2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果. 3. 在不为某列设置固定宽度的情况下,四列及四列以下均是平分屏 ...
项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上）
说明:本总结来源于慕课网 @ustbhuangyi老师的课程<Vue.js2.5+cube-ui重构饿了么App>课程,本博客做了项目总结梳理便于回顾,需要学习的伙伴可以移步学习.与君共勉 ...
项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下）
说明:本总结来源于慕课网 @ustbhuangyi老师的课程<Vue.js2.5+cube-ui重构饿了么App>课程,本博客做了项目总结梳理便于回顾,需要学习的伙伴可以移步学习.与君共勉 ...

a-table及相关组件的使用

a-table及相关组件的使用

基础的渲染

常见功能及效果：

表头文字处理

表格文字处理

隔行变色

分页

筛选与排序

筛选与排序

序号列

a-table及相关组件的使用相关推荐

最新文章

热门文章