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

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="tdContent">{{ scope.row.title }}</div>
							 </el-popover>
						</template>
			    </el-table-column>
				<el-table-column
						 width="77"
						 prop="content"
						 label="内容">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" placement="top-start">
									<!-- 单元格中的内容 -->
									<div slot="content">{{ scope.row.content }}</div>
									<!-- 浮框中的内容 -->
									<div class="tdContent">{{ scope.row.content }}</div>
								</el-tooltip>
							</template>
				</el-table-column>
				<el-table-column
						prop="createDate"
						label="创建时间"
						:formatter = "formatDate"
						width="180"
						sortable
						show-overflow-tooltip>
				</el-table-column>
				<el-table-column
						prop="updateDate"
						label="更新时间"
						:formatter = "formatDate"
						width="180"
						sortable
						show-overflow-tooltip>
				</el-table-column>
				<el-table-column
						label="操作" width="150">
							<template slot-scope="scope">
								<el-button @click="seeDetailRecord(scope.row)" type="primary" size="small">查看</el-button>
								<el-button @click="deleteRecord(scope.row)" type="danger" size="small">删除</el-button>
							</template>
					</el-table-column>
				</el-table>
				<div style="padding:10px;clear:both;"><!--间隙--></div>
				<div align="center">
						<el-pagination
								@size-change="handleSizeChangeSign"
								@current-change="handleCurrentChangeSign"
								:current-page="recordTable.currentPage"
								:page-size="recordTable.pageSize"
								:page-sizes="[10, 20, 30, 40]"
								layout="sizes,total, prev, pager, next, jumper"
								:total="recordTable.data.length">
						</el-pagination>
					</div>
</div>

//js
<script type="text/javascript" src="../../scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../scripts/vue.js"></script>
<script type="text/javascript" src="../../element2.12/lib/index.js"></script>

javascript

	$().ready(function(){
		//初始化数据
		initVueObject();
	});
	//初始化数据
	function initVueObject(){
		"use strict";
		vueObject = new Vue({
			el:'#app',
			data:{
				//表格
				recordTable: {
					//接触表加载条
					loading: false,
					//错误信息
					erroText: "",
					//页码（默认第一页）
					currentPage:1,
					//每页显示数量变更（默认10条）
					pageSize:10,
					//接触表数据
					data: []
				}
			},
			methods:{
				//每页显示数据量变更
				handleSizeChangeSign: function (val) {
					this.recordTable.pageSize = val;
				},
				//页码变更
				handleCurrentChangeSign: function (val) {
					this.recordTable.currentPage = val;
				},
				//时间转换
				formatDate: function (row, column) {
					//row 行 column 列 - 每行 - 这列的这个属性
					var date = row[column.property];
					if (date) {
						return timeStampToFormatedDateStr(date);
					} else {
						return "";
					}
				}
			}
		});
	}
/**
 * 时间戳转换为yyyy-MM-dd HH:mi:ss
 * @param type
 */
function timeStampToFormatedDateStr(timeStamp){
    var time = new Date(timeStamp);
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}