网站架设流程,网站悬浮窗口代码,网站设计的优点和缺点,阿里云网站建设优化需求说明#xff1a; 项目中经常会用到的一个场景#xff0c;表格第一列显示序号#xff08;1、2、3...#xff09;#xff0c;但是在翻页后要递增显示序号#xff0c;例如10、11、12#xff08;假设一页显示10条数据#xff09;#xff0c;针对这种情况#xff0c;封…需求说明 项目中经常会用到的一个场景表格第一列显示序号1、2、3...但是在翻页后要递增显示序号例如10、11、12假设一页显示10条数据针对这种情况封装了一个vue的组件。 核心代码
1定义组件
templateel-table-column typeindex label序号 width61template #defaultscope{{ (page - 1) * pageSize scope.$index 1 }}/template/el-table-column
/templatescript setup
defineProps({// 当前页码page: {type: Number,default: 1,},// 每页显示数量pageSize: {type: Number,default: 10,},
});
/script2父组件引用
el-table v-loadingloading :datatableData border!-- 引用序号组件 --TableIndexColumn :pagepage.pageNo :pageSizepage.pageSize /el-table-column propuserName label用户名template #defaultscope{{ scope.row.employeeNo }}/template/el-table-columnel-table-column propemail label邮箱template #defaultscope{{ scope.row.email }}/template/el-table-column
/el-table
el-paginationv-model:current-pagecurrentPagev-model:page-sizepageSize:layoutlayout:page-sizespageSizes:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange
/
