antDesignVue表格
2024-10-21 11:55:30
<template>
<a-table
:pagination="ipagination"
@change="handleTableChange"
:columns="columns"
:row-selection="rowSelection"
:data-source="dataList"
rowKey="code"
:scroll="{ x: 500, y: 250 }"
>
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'userName',
align: "center",
},
{
title: '手机号',
dataIndex: 'telphone',
align: "center",
},
],//表头
dataList: [
{
updateTime: '2022',
userName: '小林',
code: '1',
telphone: '11111111111',
},
{
updateTime: '2022',
userName: '小黄',
code: '2',
telphone: '12222222222'
},
],//表格
selectList: [],//选择列表
selectedRowKeys: [],
ipagination:{
pageSize: 10,//每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
},
pageSize:10,
pageNum:1,
}
},
computed: {
rowSelection() {
return {
//onChange方法，rowSelection改变时触发
onChange: (selectedRowKeys, list) => {
//获取选中行的key元素，和下面selectedRowKeys属性配合使用，表示给rowSelection绑定一个v-model，为this.selectedRowKeys
this.selectedRowKeys = selectedRowKeys
//获取选中的行的所有元素
this.selectList = list
},
selectedRowKeys: this.selectedRowKeys
}
}
},
methods: {
handleTableChange(val){//分页
this.pageSize=val.pageSize
this.pageNum=val.pageNum
}
}
}
</script>
<style scoped>
</style>
最新文章
- Java集合---ConcurrentHashMap原理分析
- AJAX里，使用XML返回数据类型，实现简单下拉列表
- 第九周PSP
- 将PostGIS转化为GeoJSON
- 车辆管理系统之搭建框架 添加必要的数据 安装svn(二)
- EasyUI datagrid frozencolumn的bug？？？
- C#泛型对类型参数的推断
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
- Codeforces Round #427 (Div. 2)
- 修改request请求参数
- CVPR 2013 关于图像/场景分类(classification)的文章paper list
- 使用vs2015编辑c++模板程序报错2019
- Vue-router浅识
- 微信公众号支付安卓和WP支付成功，苹果不能支付！
- java jsp失效问题--待解决
- 从头认识多线程-1.9 迫使线程停止的方法-return法
- ISO8583
- Python格式符说明
- golang学习之win7下go环境搭建
- centos 安装flash