Table 表格 + Pagination 分页

news2024/9/25 7:14:23 
<el-table>属性
v-loading				加载动画
data					显示的数据
border					是否带有纵向边框
fit						列的宽度是否自撑开
highlight-current-row	是否要高亮当前行
row-style				行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
cell-style				单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
header-cell-style		表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
default-sort			默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序

<el-table-column>属性
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip
sortable				对应列是否可以排序
prop					对应列内容的字段名
width					对应列的宽度
min-width				对应列的最小宽度
label					显示的标题
align					对齐方式

<el-table 
	v-loading="listLoading" 
	:data="list" 
	border 
	fit 
	highlight-current-row 
	:row-style="{height: '38px'}"
	:cell-style="{padding: '0'}" 
	:header-cell-style="{backgroundColor:'#409EFF',color:'#fff',textAlign:'center',height:'36px',padding:'0'}"  
	style="width: 100%"
	:default-sort="{prop: 'id', order: 'descending'}">
	<el-table-column align="center" label="ID" width="80" sortable prop="id">
		<template slot-scope="scope">
			<span>{{ scope.row.id }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="充值包名" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.name }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="展示名" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.showname }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="到账金额(元)" show-overflow-tooltip min-width="100">
		<template slot-scope="scope">
			<span>{{ scope.row.price }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="售价(元)" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.sellprice }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="类型" show-overflow-tooltip min-width="100">
		<template slot-scope="scope">
			<el-tag v-show="scope.row.type===1" type="success">普通充值包</el-tag>
			<el-tag v-show="scope.row.type===2" type="warning">活动充值包</el-tag>
			<el-tag v-show="scope.row.type===3" type="danger">首充充值包</el-tag>
			<el-tag v-show="scope.row.type===5" type="">分期到账充值包</el-tag>
		</template>
	</el-table-column>
	<el-table-column align="center" label="充值包状态">
		<template slot-scope="scope">
			<el-tag v-show="scope.row.status==5" type="success">正常</el-tag>
			<el-tag v-show="scope.row.status==6" type="danger">禁用</el-tag>
		</template>
	</el-table-column>
	<el-table-column align="center" label="代理">
		<template slot-scope="scope">
			<span>{{ scope.row.aname }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="子代理">
		<template slot-scope="scope">
			<span>{{ scope.row.accname }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="创建时间" min-width="100">
		<template slot-scope="scope">
			<span>{{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="排序" sortable>
		<template slot-scope="scope">
			<span>{{ scope.row.sort }}</span>
		</template>
	</el-table-column>
	
	

	<el-table-column align="center" label="操作" min-width="200" fixed="right">
		<template slot-scope="scope">
			<el-button type="primary" size="mini" :disabled="scope.row.status==5">启用</el-button>
			<el-button type="primary" size="mini" :disabled="scope.row.status==6">禁用</el-button>
			<el-button type="primary" size="mini">修改排序</el-button>
		</template>
	</el-table-column>
</el-table>

<!-- 分页 -->
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

import Pagination from '@/components/Pagination'
components: {
	Pagination,
},
data() {
	return {
		tabHeader: tabHeader,
		listLoading: true,
		list: [],
		total: 0,
		listQuery: {
			page: 1,
			limit: 10,
			status: 5, // 正常
			aid: null, // 代理id
			accid: null, // 子代理id
		},
	}
},
created() {
	// 自行写接口请求进行赋值
},

Pagination分页

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: false,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 15, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

scroll-to.js

Math.easeInOutQuad = function(t, b, c, d) {
	t /= d / 2
	if (t < 1) {
		return c / 2 * t * t + b
	}
	t--
	return -c / 2 * (t * (t - 2) - 1) + b
}

// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
		.mozRequestAnimationFrame || function(callback) {
			window.setTimeout(callback, 1000 / 60)
		}
})()

/**
 * Because it's so fucking difficult to detect the scrolling element, just move them all
 * @param {number} amount
 */
function move(amount) {
	document.documentElement.scrollTop = amount
	document.body.parentNode.scrollTop = amount
	document.body.scrollTop = amount
}

function position() {
	return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}

/**
 * @param {number} to
 * @param {number} duration
 * @param {Function} callback
 */
export function scrollTo(to, duration, callback) {
	const start = position()
	const change = to - start
	const increment = 20
	let currentTime = 0
	duration = (typeof(duration) === 'undefined') ? 500 : duration
	var animateScroll = function() {
		// increment the time
		currentTime += increment
		// find the value with the quadratic in-out easing function
		var val = Math.easeInOutQuad(currentTime, start, change, duration)
		// move the document.body
		move(val)
		// do the animation unless its over
		if (currentTime < duration) {
			requestAnimFrame(animateScroll)
		} else {
			if (callback && typeof(callback) === 'function') {
				// the animation is done so lets callback
				callback()
			}
		}
	}
	animateScroll()
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/488012.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android - 深色主题

Android - 深色主题

一、简介 我们一直以来使用的操作系统都是以浅色主题为主的&#xff0c;这种主题模式在白天或者是光线充足的 情况下使用起来没有任何问题&#xff0c;可是在夜晚灯光关闭的情况下使用就会显得非常刺眼。 于是&#xff0c;许多应用程序为了能够让用户在光线昏暗的环境下更加舒…
阅读更多...
mysql使用innodb引擎，请简述mysql索引的最左前缀如何优化orderby语句。

mysql使用innodb引擎，请简述mysql索引的最左前缀如何优化orderby语句。

关键点 如果排序字段不在索引列上&#xff0c;filesort有两种算法&#xff1a; mysql就要启动双路排序和单路排序无过滤不索引order by非最左 filesort顺序错 filesort方向反 filesort 答案 首先要对sql进行分析检查必要的查询字段&#xff0c;过滤字段&#xff0c;排序字段…
阅读更多...
JeecgBoot免费低代码平台—多租户SAAS解决方案

JeecgBoot免费低代码平台—多租户SAAS解决方案

JeecgBoot免费低代码平台&#xff0c;提供一键切换多租户模式机制&#xff01;快速实现全系统的saas租户方案&#xff0c;通过租户ID进行数据隔离。 租户设计思路 1、开启全系统租户隔离 开启方法 将 org.jeecg.config.mybatis.MybatisPlusSaasConfig#OPEN_SYSTEM_TENANT_CO…
阅读更多...
Selenium：浏览器及鼠标、键盘事件

Selenium：浏览器及鼠标、键盘事件

目录 一、控制浏览器 二、鼠标事件 三、键盘事件 一、控制浏览器 webdriver主要提供操作页面上各种元素的方法&#xff0c;但它也提供操作浏览器的一些方法&#xff0c;例如控制浏览器大小、前进和后退等。 1、控制浏览器窗口大小 1 # 控制浏览器大小 2 from selenium imp…
阅读更多...
2023哪款蓝牙耳机性价比高？200左右高性价比蓝牙耳机推荐

2023哪款蓝牙耳机性价比高？200左右高性价比蓝牙耳机推荐

现如今的蓝牙耳机越来越多&#xff0c;人们在选择时不免纠结&#xff0c;不知道选什么蓝牙耳机比较好&#xff1f;针对这个问题&#xff0c;我来给大家推荐几款性价比高的蓝牙耳机&#xff0c;一起来看看吧。 一、南卡小音舱Lite2蓝牙耳机 参考价&#xff1a;299 蓝牙版本&am…
阅读更多...
常见提高SQL执行效率示例

常见提高SQL执行效率示例

1、减少与数据库的交互&#xff1a; 当传参是一个list集合时&#xff0c;通过遍历查询数据库会造成数据库压力过大&#xff0c;这样查询效率就比较低&#xff0c;应该减少与数据库的交互来提高查询效率&#xff1a;(这里的objId为“ljydl”,"ljtpfl") QueryWrapper&…
阅读更多...
JavaScript全解析——本地存储的概念、用法详解

JavaScript全解析——本地存储的概念、用法详解

本地存储概念&#xff1a; 就是浏览器给我们提供的可以让我们在浏览器上保存一些数据 常用的本地存储 localStorage sessionStorage localStorage 特点: 1.长期存储,除非手动删除否则会一直保存在浏览器中&#xff0c;清除缓存或者卸载浏览器也就没有了 2.可以跨页面通讯,…
阅读更多...
如何设计出结构清晰布局漂亮的SWC结构图

如何设计出结构清晰布局漂亮的SWC结构图

我们都知道AUTOSAR的设计理念是自顶向下的设计，并且现在使用的很多AUTOSAR工具链对于SWC的设计都支持模型设计，以Vector Developer工具为例，假设我们不调整Composition，其结构图显示将会比较乱，比如如下这个样子，结构图中ports关系不清晰，位置重叠，布局不够清晰，有些朋…
阅读更多...
二维码在设备管理中的应用

二维码在设备管理中的应用

对设备进行巡检是工厂日常管理中必不可少的工作之一&#xff0c;从前很多工厂使用纸质记录打钩的方式进行设备巡检&#xff0c;但纸质巡检单不易保存也不方便进行查阅或汇总&#xff0c;除此之外光靠打钩很难保证巡检的真实性&#xff0c;不能起到防假检的功能。 为了让设备巡…
阅读更多...
vue3+Typescript实现路由标签页和面包屑

vue3+Typescript实现路由标签页和面包屑

文章目录 在vue中实现路由标签页和面包屑需求分析最终效果实现步骤第一步&#xff1a;创建路由标签组件和面包屑第二步&#xff1a;创建路由标签数组第三步&#xff1a;监听路由变化并自动添加新标签第四步&#xff1a;处理关闭标签事件第五步&#xff1a;当前路由标题同步面包…
阅读更多...
Oracle RAC 19c集群搭建指南：实现高可用、高性能的数据库集群（超详细）

Oracle RAC 19c集群搭建指南：实现高可用、高性能的数据库集群（超详细）

Oracle RAC 19c集群搭建指南&#xff1a;实现高可用、高性能的数据库集群&#xff08;超详细&#xff09; 1.新建节点 因为rac集群使用的是共享盘&#xff08;esxi设置共享盘步骤如下&#xff09;&#xff1a; 首先添加一个iSCSI控制器SCSI总线共享选择虚拟添加硬盘&#xf…
阅读更多...
java:fastjson,jackson自定义反序列化器设计暨jackson反序列化时出现StackOverflowError异常的原因分析

java:fastjson,jackson自定义反序列化器设计暨jackson反序列化时出现StackOverflowError异常的原因分析

问题描述 如下是一个Java Bean类&#xff0c;这是我的sql2java工具根据数据库表自动生成的对应表记录的Java类。 与之对应的数据库表定义如下&#xff1a; CREATE TABLE IF NOT EXISTS dc_device_channel (device_id int NOT NULL COMMENT XNAME:设备IDX,sid …
阅读更多...
一种具备过载检测和打嗝式保护功能的MBUS主机电路

一种具备过载检测和打嗝式保护功能的MBUS主机电路

关于MBUS电路原理和简化电路见本篇文章&#xff0c; MBUS主机端简化版电路设计_Tech-Wang的博客-CSDN博客https://blog.csdn.net/jsf120/article/details/123378064?spm1001.2014.3001.5502 上篇中的电路已经验证通过并在产品中实际应用&#xff0c;本篇在此基础上增加了打嗝…
阅读更多...
itop-3568开发板驱动学习笔记（25）设备树（四）GPIO 实例分析

itop-3568开发板驱动学习笔记（25）设备树（四）GPIO 实例分析

《【北京迅为】itop-3568开发板驱动开发指南.pdf》 学习笔记 文章目录 GPIO 控制器必要属性其他属性 指定 GPIO 引脚 和时钟类似&#xff0c;GPIO 在设备树中也存在两层定义&#xff0c;首先是 GPIO 控制器&#xff0c;这部分由芯片原厂工程师编写&#xff0c;相当于 GPIO 底层…
阅读更多...
恺撒密码太简单？这样一改，秒变地狱级难度(37)

恺撒密码太简单？这样一改，秒变地狱级难度(37)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 欢迎和猫妹一起&#xff0c;趣味学Python。 今日主题 看过上一篇文章的朋友&#xff0c;可能觉得这样加密&#xff0c;未免太简单了吧&#xff1f; 一共26个字母&#xf…
阅读更多...
【java】一文让你了解透彻Java中的IO模型

【java】一文让你了解透彻Java中的IO模型

文章目录 前言一、什么是IO二、常见的IO模型BIO&#xff08;Blocking IO&#xff09;如何优化NIO的面世 三、NIO&#xff08;Non-blocking/New IO&#xff09;同步非阻塞IO模型IO多路复用模型Java中的NIO 四、AIO&#xff08;Asynchronous IO&#xff09;总结 前言 本文只是说…
阅读更多...
不要一昧的给孩子做骨密度检查，这些情况才要做

不要一昧的给孩子做骨密度检查，这些情况才要做

国内&#xff0c;骨密度检测应用非常广泛。也成了很多医院儿科常规的体检项目之一。而在儿科领域&#xff0c;对骨密度检查的必要性、临床参考意义一直颇有争议。 有专家说&#xff0c;“孩子需要及时检测骨密度&#xff0c;但是要用科学有效的检测方式……只有双能X线的检测方…
阅读更多...
BetaFlight统一硬件配置文件研读

BetaFlight统一硬件配置文件研读

BetaFlight统一硬件配置文件研读 1. 源由2. 分析2.1 硬件SOC2.2 统一配置文件2.3 cli命令2.4 板级配置主要命令2.4.1 board_name2.4.2 manufacturer_id2.4.3 resource2.4.4 timer2.4.5 dma2.4.6 serial2.4.7 set2.4.8 feature 3. 实例研读3.1 C遗留配置3.2 BoardName - AOCODAR…
阅读更多...
asp.net+C#基于web的失物招领系统ccA1A9程序

asp.net+C#基于web的失物招领系统ccA1A9程序

根据分析&#xff0c;该系统应该有二个角色&#xff1a;管理员、注册用户。系统需要赋予他们对应的功能和权限&#xff0c;具体如下&#xff1a; 管理员具有&#xff1a;管理管理注册用户、管理新闻模块、管理留言的功能和权限。 具有&#xff1a;浏览新闻、管理失物信息、参与…
阅读更多...
【Linux内幕】DMA原理

【Linux内幕】DMA原理

1.前言 I/O设备与主存信息传送的控制方式分为程序轮询、中断、DMA、RDMA等。 2.DMA介绍 DMA&#xff0c;全称Direct Memory Access&#xff0c;即直接存储器访问。 DMA传输将数据从一个地址空间复制到另一个地址空间&#xff0c;提供在外设和存储器之间或者存储器和存储器之…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023