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

最新推荐文章于 2024-04-12 07:09:15 发布

好事总会发生在下个转弯

最新推荐文章于 2024-04-12 07:09:15 发布

阅读量306

点赞数

分类专栏：框架文章标签： elementui

本文链接：https://blog.csdn.net/drawlessonsfrom/article/details/119457784

版权

框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

具体代码

<!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>

好事总会发生在下个转弯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-checkbox-group中如何使用相关的键进行相关多选框的选择

具体代码<!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 的样式，
复制链接

扫一扫