2. detail页面的组件Info：

<el-checkbox-group v-model="chooseRoleNames">
  <el-checkbox v-for="(item,index) in totalRoles" @change="change(index, item)" :label="item.name" :key="index" name="type" class="favour_checkbox" >{{ item.name }}</el-checkbox>
</el-checkbox-group>
  data() {
    return {
      loading: false,
      info: {},
      totalRoles: [],
      readOnly: false,
      placeHolder: '请输入内容',
      chooseRoleNames: []  // 选中的数据 // 注意: el-checkbox取得的时label属性的值. 官方文档有说明不能为Object类型! 且label属性只能是String,Number,Boolean类型
el-checkbox-group
 
 
其中的chooseRoleNames是（发送axios请求后台api返回的）该用户对应的角色名的数组name[String]（注意：必须为字符串，不支持Object）
 
el-checkbox（解决不回显的问题：重点在这，仔细看）
 
 
其中的totalRoles是（发送axios请求后台api返回的）所有角色（注意：勾选选中后，返回给el-checkbox-group的是对应的“:label”的值，而不是“:value”。必须为字符串String或Number或Boolean类型，不支持Object，如下图，参看官方文档：https://element.eleme.cn/#/zh-CN/component/checkbox#checkbox-attributes）
 
3. detail页面
 
<template>
  <div class="inner-content">
    <div class="oag-report">
      <div class="align-right m-b-10 m-t-10">
        <el-button v-show="showTentative" v-loading.fullscreen.lock="loading" type="danger" @click="save()">保存修改</el-button>
      <info :id="id" :name="name" :status="status" @catchInfomation="catchInfomation" ref='infoData'/>
</template>
 
保存save方法放在在detail中：
 
<script>
import Info from './components/Info'
import { saveInfo } from '../../../api/system/user'
export default {
  components: {
  data() {
    return {
      id: +this.$route.query.id,
      name: this.$route.query.name,
      status: +this.$route.query.status,
      infomation: {},
      toTentative: 0,
      showTentative: true,
      showFinish: false,
      showRevise: false,
      loading: false,
      exportExcelLoading: false,
      exportPdfLoading: false
  methods: {
    catchInfomation(infomation) {
      this.infomation = infomation
    save() {
      this.loading = true
      // console.log(this.$refs.info.totalRoles)
      let chooseRoles = []
      this.$refs.infoData.totalRoles.forEach(val=>{
        let t = this.$refs.infoData.chooseRoleNames.findIndex(find=>{
          return find == val.name
        if(t>-1){
          chooseRoles.push(val)
      this.infomation.roles = chooseRoles;
      saveInfo(this.infomation).then(response => {
        if (!response) {
          alert('保存失败！')
        } else {
          alert('保存成功！')
          this.goback()
        this.loading = false
    goback() {
      this.$router.go(-1)
</script>
 
VUE也是正在学习，所以踩这个坑浪费了我一整天时间，网上关于checkbox回显失效的问题，说的都不是我想要的，还有的使用tree方式绕过去了，不好过还好找了以前的同事，分分钟解决了。
 
所以基础很重要，而且还要会看官方文档！！
 
希望对大家有所帮助！
                    一、场景：用户表——角色表，用户管理界面可以选择角色，并且每次初始化时候支持“回显”，如图：使用elementUI的复选框组合：el-checkbox-groupel-checkbox二、上代码：1. 整体结构（列表页和详情页）：2. detail页面的组件Info：&lt;el-checkbox-group v-model="chooseRoleNames"&gt;  &lt;el-checkbox v-for="(item,index) in totalR
				
在写项目时，获取了数据后想要代码比较简洁，但在各种循环时出现了很多问题。
由于获取的数据格式，跟最后需要提交的数据格式不一致，所以一开始打算分为两个数据，一个是负责显示的数据A，另一个是负责绑定的数据B。A负责页面的渲染，B负责最终的提交。
这个过程里面，常出现的两个问题，一个是length undefined如下图
这个提示的原因一般是数据格式不是数组，所以获取不到length属性
另一个是跟上面长得很像 property 'xxx' of undefined，这个是因为对象里没有'xxx'这个属性
				
el-checkbox的lable的用法很关键。
lable对应的是v-model绑定的数组里的对象。
例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。
data定义:
sendTypeList: [{
    value: 1,
    label: "手机短信"
    value: 2,
    label: "邮箱"
				
目录vue之ele中el-checkbox-group复选框组件的使用Home.vueSetTeam.vue
vue之ele中el-checkbox-group复选框组件的使用
Home.vue
  作者：xzl
  时间：05月05日160944
<template>
    <div>checkedId - {{ checkedId }}</div>
    <el-checkbox-group 
    :min="1"
    :max="2">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
				
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。
效果图预览：
首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能
<div class=deliverySetting-table>
      <div class=table-head>
        <div class=selection>
          <el-checkbox :indeterminate=indetermi
npm install --save el-select-tree
需要element-ui
 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示：
 import 'el-select-tree/lib/element-ui' ;
import Vue from 'vue' ;
import ElSelectTree from 'el-select-tree' ;
Vue . use ( ElSelectTree ) ;
组件内注册
import ElSelectTree from 'el-select-tree' ;
export default {
  components : {
    ElSelectTree
  trigger: 'item',
  // formatter: '{a} <br/>{b} : {c} ({d}%)'
  formatter: function(params) { // 在此处直接用 formatter 属性
    // console.log(params) // 打印数据
    debugger
    return `
            <div>KB编号：${params['data'].kb}</div&gt.
				
在 Element UI 的表格中，要实现勾选框的反选功能，你可以使用以下步骤：
1. 首先，确保你的表格列定义了一个名为 `selection` 的类型，这样会在每一行添加一个勾选框列。例如：
```html
<el-table-column type="selection"></el-table-column>
2. 在你的 Vue 组件中，定义一个变量来存储选中的行数据。例如：
```javascript
data() {
  return {
    selectedRows: []
3. 在表格组件中，在 `el-table` 标签上添加 `@selection-change` 事件监听器，并将选中的行数据存储到 `selectedRows` 变量中。例如：
```html
<el-table
  :data="tableData"
  @selection-change="handleSelectionChange"
</el-table>
4. 在 Vue 组件的方法中，实现 `handleSelectionChange` 方法来更新 `selectedRows` 变量的值。例如：
```javascript
methods: {
  handleSelectionChange(selection) {
    this.selectedRows = selection
5. 最后，在 Vue 组件中，定义一个反选的方法来实现勾选框的反选功能。例如：
```javascript
methods: {
  inverseSelection() {
    const allRows = this.$refs.table.selectAll()
    const selectedRows = this.selectedRows
    const inverseRows = allRows.filter(row => !selectedRows.includes(row))
    this.$refs.table.clearSelection()
    inverseRows.forEach(row => this.$refs.table.toggleRowSelection(row))
现在，当你调用 `inverseSelection` 方法时，勾选框将会反选当前表格中的行数据。你可以根据自己的需求修改方法的实现，以适应你的业务逻辑。