<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" width="55" :reserve-selection="true">
</el-table-column>
<el-table-column label="Id" prop="id" width="120">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="4">
</el-pagination>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./linq.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
tableData: [],
tableDataAll: [{
id: 1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 4,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
tableDataSelect: [{
id: 1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: [],
currentPage: 1,
pageSize: 1
},
methods: {
getData: function () {
var _this = this;
_this.tableData = Enumerable.From(_this.tableDataAll).Skip((_this.currentPage - 1) * _this.pageSize).Take(_this.pageSize).ToArray();
console.log(_this.tableData);this.setSelect(_this.multipleSelection);
},
setSelect: function (rows) {
var _this = this;
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row,true);
});
}
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
getRowKeys(row) {
return row.id;
}
},
mounted: function () {
this.multipleSelection =this.tableDataSelect;
this.getData();
}
})
</script>
</html>
