<!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. 50. Set接口和Set的实现类HashSet

    集合分类:-------------------| Collection 单列集合的根接口   ---------------| List 如果实现了List接口的集合类,具备的特点是:有序,可重复- ...

  2. 引入CSS样式表（书写位置）

    CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...

  3. JavaWeb学习篇之----Jsp详解

    今天我们来看一下Jsp的相关知识,首先来看看一下Jsp的相关定义: 简介: JSP全称是JavaServer Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术 ...

  4. HDFS（Hadoop Distributed File System）的组件架构概述

    1.hadoop1.x和hadoop2.x区别 2.组件介绍 HDFS架构概述1)NameNode(nn): 存储文件的元数据,如文件名,文件目录结构,文件属性(生成时间,副本数,文件权限),以及每个 ...

  5. 17 win7 sp1 x64/VS2015下配置creo4.0二次开发环境——调用了众多开源库（ceres-solver，PCL1.8.0，office 2016COM接口，MySql数据库等）

    0 引言 本次开发环境的配置是在综合考虑了开源库的版本.VS版本以及CREO4.0的版本,同时针对甲方需求选择了win7 sp1 x64系统. 配置的过程中遇到了形形色色的问题,但是一一解决了.通过这 ...

  6. hive常见的存储格式

    Hive常见文件存储格式 背景:列式存储和行式存储 首先来看一下一张表的存储格式: 字段A 字段B 字段C A1 B1 C1 A2 B2 C2 A3 B3 C3 A4 B4 C4 A5 B5 C5 行 ...

  7. dcoker安装redis

    一.安装 搜索镜像 #docker search redis 拉取镜像 #docker pull redis 创建redis容器 #docker run -d --name redis --resta ...

  8. NX二次开发-UFUN创建基准平面UF_MODL_create_plane

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建基准平面 ] = {0.0, 0.0, ...

  9. NX二次开发-UFUN删除链表函数UF_MODL_delete_list

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...

  10. P1650 赛马

    P1650 赛马 题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负者这 ...