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

Posted 2020-12-01 awatangjay

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element table初始化默认选中以及切换页码的时候保留选中状态相关的知识，希望对你有一定的参考价值。

<!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初始化默认选中以及切换页码的时候保留选中状态的主要内容，如果未能解决你的问题，请参考以下文章

Element ui table selection 分页支持保存已经选中的数据，同时支持随时删除选中的数据，并设置默认选择

element-ui中el-table的多选默认选中

Element ui 中使用table组件实现分页记忆选中

Element-ui 中table 默认选中 toggleRowSelection

element-ui 组件的 table 复选框，翻页记忆功能