el-checkbox-group中如何使用相关的键进行相关多选框的选择

最新推荐文章于 2025-05-27 17:06:57 发布

原创最新推荐文章于 2025-05-27 17:06:57 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

框架专栏收录该内容

9 篇文章

订阅专栏

这个示例展示了如何在Vue应用中利用Element-UI库创建一个复选框组。代码导入了Vue.js、Element-UI的样式和组件库，并定义了一个数据结构来驱动复选框选项。复选框的值由`selTitles`数组控制，初始选中了'status'和'name'两个选项。

具体代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>el-checkbox的使用</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue,后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

<body>
    <div id="app">
        <el-checkbox-group v-model="selTitles">
            　　<el-checkbox class="titles" v-for='(allItem, allItemIndex) in allTitles' :label="allItem.value"
                :key="allItem.value">{{allItem.lable}}</el-checkbox>
        </el-checkbox-group>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    allTitles: [{
                            value: 'status',
                            lable: '检查状态'
                        },
                        {
                            value: 'name',
                            lable: '姓名',
                        },
                        {
                            value: 'sex',
                            lable: '性别'
                        },
                        {
                            value: 'age',
                            lable: '年龄'
                        }
                    ], // 全部列
                    selTitles: ['status', 'name']
                }
            }
        })
    </script>
</body>

</html>