el-checkbox-group 不支持数组对象回显怎么办

dtdyhjmokra1年前 ⋅ 1061 阅读
可以通过设置 el-checkbox 的 v-model 绑定一个数组,并且在 el-checkbox-group 的 value 属性中传入该数组,这样就可以完成回显数组对象的功能。

例如,有一个数组对象如下:

```
var items = [
  { id: 1, name: '选项1' },
  { id: 2, name: '选项2', disabled: true },
  { id: 3, name: '选项3' },
  { id: 4, name: '选项4' },
  { id: 5, name: '选项5', disabled: true },
];
```

如果需要选中其中的前两项,可以这样写:

```

  {{item.name}}

```

在 Vue 实例中,设置选中的 id 的数组,然后遍历数组对象 items,将 id 作为 label 属性绑定到 el-checkbox 上,同时根据该对象是否被禁用来设置 disabled 属性。

```
var app = new Vue({
  el: '#app',
  data: {
    selectedIds: [1, 2],
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2', disabled: true },
      { id: 3, name: '选项3' },
      { id: 4, name: '选项4' },
      { id: 5, name: '选项5', disabled: true },
    ]
  },
  computed: {
    checkedItems() {
      return this.selectedIds;
    }
  }
});
```

这样就可以实现选中回显数组对象的功能了。

全部评论: 0

    相关推荐