element-ui checkbox基础多选（绑定后台json对象值）

最新推荐文章于 2024-06-06 16:36:35 发布

丸子'

最新推荐文章于 2024-06-06 16:36:35 发布

阅读量4.5k

点赞数 5

分类专栏： vue element-ui 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_41193701/article/details/103685391

版权

首先申明看你需求的数据格式是怎样的
如果是json数组的如：

const cityOptions = ['上海', '北京', '广州', '深圳']

那么可以直接看element-ui的官方链接的写法
https://element.eleme.cn/#/zh-CN/component/checkbox
但我们实际项目开发中大部分都是json数组而element-ui的官方文档中没有给出详细的操作流程
直接上码
html部分：

    <div>
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox-group v-model="data" @change="handledataChange">
        <el-checkbox v-for="(value,key) in datas" :key="key" :label="value.key">{
  { value.name }}</el-checkbox>
      </el-checkbox-group>
    </div>

data部分：