码迷,mamicode.com
首页 > 其他好文 > 详细

element table初始化默认选中以及切换页码的时候保留选中状态

时间:2019-10-29 23:52:39      阅读:366      评论:0      收藏:0      [点我收藏+]

标签:clear   状态   hal   ges   地址   page   from   link   sheet   

<!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初始化默认选中以及切换页码的时候保留选中状态

标签:clear   状态   hal   ges   地址   page   from   link   sheet   

原文地址:https://www.cnblogs.com/awaTangjay/p/11762047.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!