el-table案例_动态匹配数据、分页、函数

最新推荐文章于 2024-08-19 16:06:03 发布

深海中有鱼

最新推荐文章于 2024-08-19 16:06:03 发布

阅读量480

点赞数

分类专栏： Vue Element

本文链接：https://blog.csdn.net/m0_46129241/article/details/106407148

版权

本文介绍了如何利用el-table组件，结合HTML/CSS和JavaScript，实现动态匹配数据并添加分页功能，同时探讨了在表格中应用函数的方法。

摘要由CSDN通过智能技术生成

el-table案例_动态匹配数据、分页、函数

html/css

//css
<link rel="stylesheet" type="text/css" href="../../element2.12/lib/theme-chalk/index.css"/>
<style>
    .el-tooltip__popper{
   
    	max-width:80%;
    }
    .tdContent{
   
    	width: 77px;
    	display: inline-block;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
}
</style>
  
<div id="app" style="width:100%;">
	<el-table 
		ref="recordTable"
		:data="recordTable.data.slice((recordTable.currentPage-1) * recordTable.pageSize,recordTable.currentPage * recordTable.pageSize)"
		 v-loading="recordTable.loading"
		 border
		 highlight-current-row
		 :empty-text="recordTable.erroText">
			  <el-table-column
						prop="title"
						label="标题"
						width="120"
						>
						<template slot-scope="scope">
							<el-popover
								placement="top-start"
								title=""
								trigger="hover">
									<!-- 单元格中的内容 -->
									<div>{
   {
    scope.row.title }}</div>
									<!-- 浮框中的内容 -->
									<div slot="reference" class&#