ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ant design for vue 关于table的一些问题

2019-10-25 17:01:02  阅读:487  来源: 互联网

标签:10 pagination vue pageNum pageSize ant design table total


 

1、为table添加分页: :pagination="pagination"

pagination: {
      defaultPageSize: 10,
      showTotal: (total) => `共${total} 条数据`,
      total: 0,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50'],
      onShowSizeChange: (current, pageSize) => {
        this.pageSize = pageSize;
        this.getTableData();
      },
      onChange: (page, pageSize) => {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getTableData();
      }

    },

2、为table添加序号:在columns中: 添加一行:  {"title": "序号",customRender: (value, row, index) => `${(this.pageNum-1)*10+index+1}`},
	/**pageNum 当前第几页*/

3、 为table添加编辑、删除功能
	<template slot="sensorId" slot-scope="text, record, index">
	    <span>
	      <a-button @click.native="editTableRow(record)" size="small" type="link">编辑</a-button>
	      <a-button @click.native="removeTableRow(record)" size="small" type="link">删除</a-button>
	    </span>
	</template>

 

标签:10,pagination,vue,pageNum,pageSize,ant,design,table,total
来源: https://www.cnblogs.com/sllzhj/p/11738951.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有