解决el-checkbox传值编辑回显问题。

21 篇文章 0 订阅
2 篇文章 0 订阅

element的官方案例中都是以中文传递参数,而我们在实际的工作中经常以id入库,所以写了一个小demo讲解一下。
官方案例:

<el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>


//data 里面
   data () {
      return {
      //以中文传值
        checkList: ['选中且禁用','复选框 A']
      };
    }

改成传id等标识

**label是展示在外的text内容.**如果el-checkbox标签之间不写任何内容显示也是label的内容,但是我们在el-checkbox标签里面加上{{}}name的值。这个其实就是显示的内容

<el-checkbox-group v-model="value" >
      <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
</el-checkbox-group>
data() {
	return {
		value: [],
		cities: [{name:'北京',id:'1'}, {name:'武汉',id:'2'},{name:'深圳',id:'3'}];
	}
};

编辑的时候只需要把从后端读取的id传入数组即可
假设是一个数组
tempArr :[‘1’,‘2’]
把当前数组绑定v-model的值重新赋值
this.value = tempArr 即可 或者结构写法 this.value.push(…value);
注意:保证两边的数据类型是一样的,即原数组里面的value是字符串,传进去的值必须是字符传。

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: el-checkbox-group回显是指在Vue.js中使用Element UI的el-checkbox-group组件时,将已经选中的选项在页面中显示出来。可以通过v-model绑定一个数组来实现回显功能,当选中的选项发生变化时,数组中的值也会随之改变,从而实现回显。例如: <template> <el-checkbox-group v-model="checkedCities"> <el-checkbox label="北京"></el-checkbox> <el-checkbox label="上海"></el-checkbox> <el-checkbox label="广州"></el-checkbox> <el-checkbox label="深圳"></el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { checkedCities: ['北京', '上海'] } } } </script> 在上面的代码中,我们将已经选中的城市(北京和上海)绑定到了checkedCities数组中,当页面渲染时,这两个选项会自动被选中。如果用户在页面上勾选了其他城市,checkedCities数组也会相应地更新,从而实现回显功能。 ### 回答2: el-checkbox-group是ElementUI中常使用的多选框组件,而回显则是指将已经被选中的选项在页面重新加载或提交表单后能够再次显示出来。那么如何实现el-checkbox-group的回显呢? 1. 绑定v-model 最简单的回显方式是通过v-model来绑定选中的值,这样在页面重新加载或提交表单后,v-model绑定的数据会自动更新,已选中的多选框也会自动选中。 2. 通过:checked属性 如果没有使用v-model绑定数据,也可以通过:checked属性来手动指定被选中状态。首先需要在data中定义一个选中的数组,然后在el-checkbox中使用:checked来判断是否被选中,如下所示: ``` <template> <el-checkbox-group v-model="checkedItems"> <el-checkbox :label="item.value" v-for="item in options" :key="item.id" :checked="checkedItems.indexOf(item.value) !== -1">{{ item.label }}</el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { options: [ {id: 1, label: '选项1', value: 'val1'}, {id: 2, label: '选项2', value: 'val2'}, {id: 3, label: '选项3', value: 'val3'} ], checkedItems: ['val1', 'val3'] // 定义选中的值 } } } </script> ``` 这样,在页面重新加载或提交表单后,已选中的多选框会保持选中状态。 总之,无论是通过v-model还是:checked属性,都能够实现el-checkbox-group的回显功能。 ### 回答3: el-checkbox-group是一个可以选择多个选项的组件,对于一些需要处理复杂数据的业务场景非常有用。在使用这个组件的时候,我们很可能需要进行回显,即在页面刷新或重新进入页面时,需要将之前选中的选项恢复为选中状态。 针对这个需求,我们可以采取以下步骤: 1.通过v-model绑定el-checkbox-group的值,将选中的选项保存在一个数组中,如:selectedOptions ```html <el-checkbox-group v-model="selectedOptions"> <el-checkbox label="option1">选项1</el-checkbox> <el-checkbox label="option2">选项2</el-checkbox> <el-checkbox label="option3">选项3</el-checkbox> <el-checkbox label="option4">选项4</el-checkbox> </el-checkbox-group> ``` 2.将selectedOptions保存在本地存储或vuex中,在页面刷新或重新进入时,从本地存储或vuex中获取selectedOptions的值,并将其赋给el-checkbox-group的v-model,即可恢复之前选中的选项。 ```javascript // 在mounted生命周期函数中获取selectedOptions的值 mounted() { this.selectedOptions = JSON.parse(localStorage.getItem('selectedOptions')) || [] }, // 在beforeUnmount生命周期函数中保存selectedOptions的值 beforeUnmount() { localStorage.setItem('selectedOptions', JSON.stringify(this.selectedOptions)) }, ``` 这样,在用户重新进入页面时,就能够恢复之前选中的选项。同时,在用户进行选择时,selectedOptions也会更新,保证了数据的实时性。 除了本地存储和vuex,我们还可以采用其他方法保存和恢复数据,比如使用Cookie或将选中的选项传递给后端进行处理等。总之,通过v-model绑定值,并将这个值保存和恢复,可以很方便地实现el-checkbox-group的回显

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__不靠谱先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值