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}