element-ui多选框demo

最新推荐文章于 2024-08-24 02:26:24 发布

原创最新推荐文章于 2024-08-24 02:26:24 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue.js中使用Element-UI的多选框组件（el-checkbox-group和el-checkbox）来展示数据，并通过v-for指令动态渲染选项。数据格式为对象数组，包含name和id属性。绑定的v-model为'checkboxGroup1'，最终结果将获取到一个选中项的数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7.element-ui多选框使用：
<div v-for="(item,index) in options" :key="index">
      <el-checkbox-group v-model="checkboxGroup1" size="small">
         <el-checkbox :label="item.name" border size="medium">{{item.name}}</el-checkbox>
      </el-checkbox-group>
</div>
数据格式：
options:[
        {
          name: "拼音码",
          id: 1
        }，
       {
          name: "名称",
          id: 2
        }，
]
结果获取：checkboxGroup1 //类型是一个数组