<!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>

element table初始化默认选中以及切换页码的时候保留选中状态的更多相关文章

  1. element table 组件内容换行方案

    element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...

  2. select2初始化默认值

    之前用select2初始化默认值使用了select2('val','1'),这样做没问题,但只能用在单选上,多选的话,即使将val后面的值改成数组['0', '2']这种形式也没用. <scri ...

  3. easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

    easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...

  4. Chapter 17_3 table的默认值

    对象属性 有很多情况需要把有些属性绑定到某个对象,例如:函数与其名称.table的默认值.数组大小等... 当对象是一个table时,可以通过适当的key将属性存储在这个table中. 如果对象不是一 ...

  5. 将Android Studio默认布局ConstraintLayout切换成LinearLayout

    将Android Studio默认布局ConstraintLayout切换成LinearLayout     大部分人初次使用google android 扁平化布局ConstraintLayout都 ...

  6. 在win10下改变默认的输入法切换Ctrl+Space

    在win10下改变默认的输入法切换Ctrl+Space 学习了:https://www.zhihu.com/question/22288432 在win10下面,有两种风格的控制面板设置: 在输入法上 ...

  7. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  8. Vue. 之 Element table 高度自适应

    Vue. 之 Element table 高度自适应 使用vue创建table后,其高度自适应浏览器高度. 在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight ...

  9. select2多选框初始化默认值和获得值

    select2多选自带手动输入搜索功能,可怜我还查寻半天api 获得值: //chang函数获取选择的option $(".js-example").change(function ...

随机推荐

  1. thymeleaf种处理select,radio和文字回显的问题

    select根据后台集合显示下列列表 <select class="form-control" name="parentId" > <opti ...

  2. Java之Java的文件结构(才不是叛教!)

    Java从入门到恰饭之文件结构,使用IDEA开发. 新建包 包名一般选择公司域名(https://tieba.baidu.com/)的反转 创建完成是这样的 对应的三层文件夹 我们创建一个类 pack ...

  3. 关于使用vue时的个人规范

    js文件: 公共功能文件:common_功能名.js 例:common_ajax.js 页面级功能文件(在不同页面复用):page_功能名.js 放置在html文件中加载的js文件命名:app_htm ...

  4. VS 2015 Download

    企业版:http://download.microsoft.com/download/B/8/F/B8F1470D-2396-4E7A-83F5-AC09154EB925/vs2015.ent_chs ...

  5. NX二次开发-C++ DeleteFile删除文件实例代码

    NX9+VS2012 #include<Windows.h> DeleteFile("D:\\1\\test123.prt"); Caesar卢尚宇 2019年7月29 ...

  6. hdu多校第五场1007 (hdu6630) permutation 2 dp

    题意: 给你n个数,求如下限制条件下的排列数:1,第一位必须是x,2,最后一位必须是y,3,相邻两位之差小于等于2 题解: 如果x<y,那么考虑把整个数列翻转过来,减少讨论分支. 设dp[n]为 ...

  7. Codeforces786B

    传送门 n个节点且固定起点最短路,三种加边方法 1.u->v, 边权为w:2. u->[l, r], 边权为w:3. [l, r]->u, 边权为w AC_Code #include ...

  8. 9.RabbitMQ Topic类型交换机

    RabbitMQ消息服务中Topic类型交换机根据通配符路由消息,*代表一个单词,#代表代表0或多个单词.   生产者 消费者   代码 Producer.java   package com.tes ...

  9. 20140408 父类指针指向子类对象 ;delete ;static作用

    1.父类指针可以指向子类对象 静态联翩:如果以父类指针指向派生类对象,那么经由该指针只能访问父类定义的函数 动态联编:根据指针实际指向的对象类型确定 2.面试宝典 P110 面试题5  #includ ...

  10. linux mysql 远程访问权限问题

    1.为了让访问mysql的客户端的用户有访问权限,我们可以通过如下方式为用户进行授权:mysql> grant all on *.* to user_name@'%' identified by ...