点击事件
data() {
return {
rowClick: (record, index) => ({
on: {
click: () => {
this.clickRow(record, index)
}
}
}),
}
methods:{
clickRow(record,index){
//record 这一行的数据
//index 这一行的索引
}
}
表头索引
在columns中第一列中定义
customRender: (text, record, index) => `${index + 1}`,
定义分页器
定义pagination属性
<a-table :columns="columns" :data-source="shoufeiData" :pagination="false" rowKey="wancheng_time">
data() {
return {
pagination: {
pageNo: 1,
pageSize: 8, // 默认每页显示数量
showSizeChanger: false, // 显示可改变每页数量
pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
showTotal: total => `共 ${total} 条数据`, // 显示总数
onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
onChange: (page, pageSize) => this.onPageChange(page, pageSize),//点击页码事件
total: 0 //总条数
}
}
},
methods:{
onPageChange(page, pageSize) {
this.pagination.pageNo = page
},
onSizeChange(current, pageSize) {
this.pagination.pageNo = 1
this.pagination.pageSize = pageSize
}
}
自定义表格内容
在columns中定义scopedSlots
<a-table :columns="columns" :data-source="member_list" rowKey="patient_id" :customRow="rowClick"
:pagination="pagination">
<span slot="action" slot-scope="item">
<span class="operate" @click.stop="chongzhi(item)">充值</span>
<span class="operate" @click.stop="chongzhi(item)">退款</span>
<span class="operate" @click.stop="stream(item)">会员流水</span>
</span>
</a-table>
const columns = [
{
title: '操作',
scopedSlots: { customRender: 'action' },
},
];
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
