用toggleRowSelection方法对el-table表格列进行选中的例子

最新推荐文章于 2024-05-14 14:48:59 发布

弗兰克的天空

最新推荐文章于 2024-05-14 14:48:59 发布

阅读量2.9k

点赞数

分类专栏：网站前端 vue

本文链接：https://blog.csdn.net/frank_fong/article/details/96477169

版权

网站前端同时被 2 个专栏收录

75 篇文章 1 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elementUI</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-button @click="openDialog">打开dialog</el-button>
        <p>{{tableData}}</p>
        <p>{{[tableData[2]]}}</p>
        <p>{{multipleSelection}}</p>

        <el-dialog title="表格" :visible.sync="dialogVisible">
            <el-table ref="table" :data="tableData" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="设备名称">
                </el-table-column>
                <el-table-column prop="name" label="门禁类型">
                </el-table-column>
            </el-table>
            <br>
            <!-- 只能用获取table下标这种写法 -->
            <el-button @click="toggleSelection([tableData[2]], true)">测试1</el-button>
            <!-- 下面这种写法不行 -->
            <el-button @click="toggleSelection(multipleSelection, true)">测试2</el-button>

        </el-dialog>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                tableData: [{
                        id: '1',
                        name: '张三'
                    },
                    {
                        id: '2',
                        data2: '李四'
                    },
                    {
                        id: '3',
                        data2: '王五'
                    }
                ],
                dialogVisible: false,
                multipleSelection: [{
                    id: '3',
                    data2: '王五'
                }]
            },
            methods: {
                openDialog() {
                    this.dialogVisible = true;
                    this.$nextTick(() => {
                        this.toggleSelection([this.tableData[2]], true);
                    });

                },

                toggleSelection(rows, selected) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs["table"].toggleRowSelection(row, selected);
                        });
                    }
                },

                handleSelectionChange(val) {
                    this.multipleSelection = val;
                }
            }
        })
    </script>
</body>

</html>

弗兰克的天空

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用toggleRowSelection方法对el-table表格列进行选中的例子

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫