0
点赞
收藏
分享

微信扫一扫

element多选框checkbox对后台数据进行回显(显示被选中状态)

Ewall_熊猫 2022-01-10 阅读 51

element多选框checkbox对后台数据进行回显(显示被选中状态)

理解

一开始我以为需要设置checked属性,事实上并不需要,只需v-model绑定上列表,这个列表中放入需要选中的元素就可以了。

官方示例:https://element.eleme.cn/#/zh-CN/component/checkbox

代码:

<template>
  <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>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>

这里给el-checkbox-group使用v-model绑定了checkList这个列表,同时列表中定义了两个元素,那么默认就会把这两个元素勾选上。

实践

vue页面

  <el-form-item label="设施: " prop="fireFacilifies">

	<el-checkbox-group v-model="fireFacilifiesSelectedList">
	  <el-checkbox v-for="item in fireFacilifiesOptions" :label="item.id"
				   :key="item.id">{{item.name}}</el-checkbox>
	</el-checkbox-group>

  </el-form-item>

js

// 回显设施列表
edit() {
	console.log("this.form.fireFacilifies  " + this.form.fireFacilifies)
	this.fireFacilifiesSelectedList = this.form.fireFacilifies.split(',')
	this.fireFacilifiesSelectedList = this.fireFacilifiesSelectedList.map(Number)
}
举报

相关推荐

0 条评论