avue table crud

<avue-crud:data="data"            //数据:option="option"        //配置@size-change="sizeChange"  //显示条数改变是出发:summary-method="summaryMethod"   //合计@current-change="currentChange"   //当前页改变时触发@selection-change="selectionChange"  多选框@refresh-change="refreshChange"   //   点击刷新按钮触发该事件:page.sync="page"        //分页></avue-crud>//copy
<avue-crud:data="data":option="option"@size-change="sizeChange":summary-method="summaryMethod"@current-change="currentChange"@selection-change="selectionChange"@refresh-change="refreshChange":page.sync="page"></avue-crud>//data
page: {//总条数为0什么都不展示total: 0, //总页数currentPage: 1, //当前页数pageSize: common.pageSize, //每页显示多少条pageSizes: [common.pageSize,common.pageSize * 2,common.pageSize * 3,common.pageSize * 4,],},
data: [],option: {searchMenuSpan: 18, //控制搜索加按钮border: true, //边框addBtn: false, //不显示自带的新增按钮viewBtn: false, //查看按钮editBtn: false, //编辑按钮showSummary: true,   //合并delBtn: false, //删除按钮index: true, //序号indexLabel: "序号",selection: true,searchBtn: true,refreshBtn:false,menu: false, //操作align: "center",menuAlign: "center",column: [{label: "1",prop: "chargeName",},{label: "1",prop: "setOnebycharId",},{label: "1量",prop: "setOnebycharId",},{label: "1",prop: "setZerobycharId",},{label: "1",prop: "zerobycharIdbydate",   },{label: "1",prop: "getreginnum",},{label: "1",prop: "builDevNum",},{label: "1",prop: "daydevnum",},{label: "1",prop: "dayeqpnum",},{label: "积1",prop: "sumdayeqpnum",},{label: "1",prop: "useratebydate",  },{label: "11",prop: "sex", //},],},//methods
//合计summaryMethod({ columns, data }) {const sums = [];if (columns.length > 0) {columns.forEach((column, index) => {if ([0].includes(index)) {sums[index] = '合计'} else if (['deptName', 'mrSectNo', 'mrSectName', 'operReader', 'mrPeriod',].includes(column.property)) {//过滤某些字段不参与计算sums[index] = '-'} else {let values = data.map(item => Number(item[column.property]));if (!values.every((value) => isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr)if (!isNaN(value)) {return prev + curr} else {return prev}}, 0);}}});}return sums;},
currentChange(val) {this.page.currentPage = val;
}//显示条数改变是出发sizeChange(pageSize) {this.page.pageSize = pageSize;this.page.currentPage = 1;
}

avue table crud相关推荐

Hbase table CRUD操作及scala编程
Hbase shell操作 1) 插入数据:put只能插入一个单元格指定表名.行键.列名.列值.[时间戳] hbase(main):081:0> put 'ns3:emp','rk0001' ...
面向初学者的带MVC API的Angular Js Table CRUD MSSQL
目录介绍 Angular Js代码要点示例截图第一部分第二部分(ASP.NET MVC WEB API和数据表) 第三部分(关于Postman发布和测试API) 注意结论介绍本文主要介绍 ...
avue中crud翻页器currentPage等修改数据，页面不同步问题
<avue-crud :option="option" ref="crud" //表格常用事件 @on-load="getList"/ ...
AVUE crud upload组件示例
在项目中使用avue crud组件,其中用到了upload组件. 官网中关于upload的解释非常简单,需要仔细阅读参数配置含义. 给出示例: 表banner(轮播横幅图表)使用avue进行CRUD操 ...
面向初学者的带有MVC API的Android 管理表CRUD MSSQL
目录介绍在Android中使用API进行表CRUD 屏幕截图示例第一节结论介绍我的上一篇文章面向初学者的带MVC API的Angular Js Table CRUD MSSQL和使用S ...
sql crud_SQL Server中的CRUD操作
sql crud CRUD operations are foundation operations every database developer and administrator needs ...
使用Vue+Spring Boot实现Excel上传
写在最前在上期教程中我们介绍了读写Excel与使用Selenium的入门方法,本期将介绍通过Vue+Spring Boot实现在WebApp中上传Excel导入测试脚本的功能.使用前后端分离的技术是 ...
python mysql example_Python_Example_ Pycharm(python) 与数据库(MySQL) 连接学习/示例
#coding=utf-8#--------------------------------- '''# Author : chu ge # Function: #''' #------------- ...
Mybatis Xml Sqlsession PageHelper
Mapper xml 1.存Date类型的数据插入#{item.createTime, jdbcType=TIMESTAMP} //数据库会存带时间的信息#{item.createTime, jd ...

avue table crud

avue table crud相关推荐

最新文章

热门文章