### 回答1：
Vue
ElementUI 的复选框回显可以通过 v-mod
el 绑定一个数组来实现。在数组中存储
选中的值，然后在复选框的 value 属性中设置对应的值。当
需要回显时，将存储的数组赋值给 v-mod
el 即可。例如：
```html
<template>
<div>
<
el-
checkbox-group v-mod
el="checkedFruits">
<
el-
checkbox lab
el="apple">苹果</
el-
checkbox>
<
el-
checkbox lab
el="banana">香蕉</
el-
checkbox>
<
el-
checkbox lab
el="orange">橙子</
el-
checkbox>
</
el-
checkbox-group>
<
el-button @click="echo">回显</
el-button>
</div>
</template>
<script>
export default {
data() {
return {
checkedFruits: ['apple', 'orange']
}
},
methods: {
echo() {
console.log(this.checkedFruits) // 输出 ['apple', 'orange']
}
}
}
</script>
```
### 回答2：
在Vue.js中，
ElementUI是一套基于Vue.js 2.0的UI组件库，提供了一些很实用的组件如
checkbox，以及多种方法来进行数据的展示和绑定。在Vue.js中使用
ElementUIcheckbox组件时，我们
需要指定初始的状态以及在状态改变过后
需要执行的操作，这种操作可以是同步的也可以是异步的。
对于
checkbox回显，我们可以通过v-mod
el和box-group来实现。
首先，我们可以在Vue.js中定义一个data属性item，其中包含一个
checkbox的状态。接着，我们可以在模板上使用
checkbox组件以及其他
ElementUI的组件来实现
checkbox的回显。我们使用v-mod
el和box-group来对
checkbox进行双向绑定，这样在用户勾选/取消勾选时，
checkbox的状态就会改变，同时也会更新item。代码如下：
```html
<template>
<
el-
checkbox-group v-mod
el="item">
<
el-
checkbox lab
el="1" name="1">选项1</
el-
checkbox>
<
el-
checkbox lab
el="2" name="2">选项2</
el-
checkbox>
<
el-
checkbox lab
el="3" name="3">选项3</
el-
checkbox>
</
el-
checkbox-group>
<button @click="submit">提交</button>
</template>
<script>
export default {
data() {
return {
item: ['1'] // 初始的状态
}
},
methods: {
submit() {
console.log(this.item) // item即为
checkbox的回显结果
// 执行提交操作
}
}
}
</script>
```
在这个例子中，我们使用了
el-
checkbox-group来包含三个
el-
checkbox，并使用v-mod
el绑定item。item的默认值为['1']，也就是第一个
checkbox默认被
选中。在用户勾选/取消勾选时，item的值会自动更新。
最后，我们为提交按钮添加了一个click事件，并在方法中使用console.log来打印item的值。这样就可以获得
checkbox的回显结果。
总之，
ElementUI提供了一个非常方便和简单的方式来实现
checkbox的回显，对于开发者来说，这对于业务逻辑的实现起到了不可替代的作用。
### 回答3：
Vue
ElementUI 提供了多种复选框组件，如
Checkbox、
Checkbox Button、
Checkbox Group 等等。在实际应用中，常常
需要对复选框的
选中情况进行回显。本文将介绍如何使用 Vue
ElementUI 实现
Checkbox 回显的功能。
1. 使用 v-mod
el 实现单个复选框的回显
Checkbox 组件支持 v-mod
el 指令，可以结合 Boolean 类型的变量实现单个复选框的
选中状态回显。首先
需要定义一个 Boolean 类型的变量 checked，并将其与
Checkbox 组件的 v-mod
el 绑定：
```
<
el-
checkbox v-mod
el="checked">选项1</
el-
checkbox>
```
在组件的 data 中初始化 checked 变量：
```
data() {
return {
checked: true
}
}
```
即可实现初始状态下
选中选项1，并在用户操作后修改 checked 变量的值来回显
Checkbox的状态。
2. 使用 v-mod
el+Array 实现多个复选框的回显
当
需要处理多个复选框组件时，则
需要使用数组来记录每个选项的
选中状态。以
Checkbox Group 组件为例，通过 v-mod
el 绑定一个数组变量，该数组包含所有
选中的选项的 value 值。每次复选框组件的
选中状态变化，都会触发数组的更新，从而实现回显效果。示例如下：
```
<
el-
checkbox-group v-mod
el="checkedList">
<
el-
checkbox lab
el="选项1"></
el-
checkbox>
<
el-
checkbox lab
el="选项2"></
el-
checkbox>
<
el-
checkbox lab
el="选项3"></
el-
checkbox>
</
el-
checkbox-group>
```
在组件的 data 中初始化一个空数组 checkedList：
```
data() {
return {
checkedList: []
}
}
```
即可实现初始状态下没有
选中任何选项，当用户
选中复选框时，记录其 value 值到 checkedList 数组中，使其
选中状态得到回显。
3. 数据回显的实现原理
在复选框
选中状态回显的过程中，实际上是把已经
选中的选项的 value 值保存到了一个数组变量中，同时将这个数组变量与相关的
Checkbox 或
Checkbox Group 组件绑定。在记录完
选中状态后，每次组件的渲染都会利用这个数组变量来决定是否将某个选项设为
选中状态。如果没有记录
选中状态的数组变量，组件将不能记忆已
选中项的状态，无法实现回显效果。
以上是使用 Vue
ElementUI 实现
Checkbox 回显的方法介绍。无论是单个复选框的回显还是多个复选框组件的回显，都
需要记录
选中状态的数组变量，并将其与
Checkbox 或
Checkbox Group 组件绑定。
需要注意的是，每次组件的渲染都会重新根据数组变量的值来判断是否
选中某个选项，因此如果要修改
选中状态，
需要修改这个数组变量的值。
文章讨论了在使用Element-UI的Checkbox组件时遇到的问题，即需要点击两次才能改变选中状态。作者提供了解决方案，建议使用`:value`代替`v-model`进行数据绑定，并在`change`事件中直接修改列表中对应项的`labelChecked`属性，而非修改事件参数`val`的值。
扫一扫
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
