el-select 绑定对象和el-checkbox-group用法

先说下el-select,下面直接给代码：

<el-form-item :label="$t('hardwareDetail.type')" prop="type">
          <el-select
            clearable
            filterable
            remote
            :placeholder="$t('selectPlaceholder')"
            class="header-search-select"
            value-key="id"
            @change="handleSelectType"
            v-model="form.type"
            style="width: 100%"
          >
            <el-option v-for="item in typeOptions" :key="item.id" :value="item" :label="item.typeName" />
          </el-select>
        </el-form-item>

其中：value = "item" 表明绑定是value值是对象，lebel显示下拉框展示的内容，这里v-model="form.type"其实内容也是item对象，但是显然我们后台只需要的是item的id,也就是业务的typeId(类型id),所以这里需要多一个@change="handleSelectType"进行赋值form表单的typeId.

这里有个很重的点，el-select里有个属性：value-key="id" 一定要，这里是value绑定对象必须要的，可以看官网有解释。

handleSelectType(val) {
      this.form.typeId = val.id
      if (val.storageType === '0') {
        this.isPerson = true
      } else {
        this.isPerson = false
      }
    }

上面方法里的val就是你选中的内容的对象，这里我不仅需要给form赋值，还需要做一些逻辑判断，比如根据val里的storageType判断isPerson,同时这样也解决了有些表，既需要id,又需要name一些字段，而select框绑定的value只能有一个的问题，这里都可以根据val给form表单赋值。但是该行数据编辑的时候，会有问题，因为我们通过从后台拿的是typeId(主键)，而不是把整个对象给返回，而这里绑定的v-model就是对象，显然这样初始化显示会有问题，那么我们需要这么做，如下：

handleEdit(row) {
      this.$refs.editHardwareDetailDialog.open().then(that => {
        row.type = { id: row.typeId }
        that.initData(row, 'edit')
      })
    }

因为我这个是父组件给子组件（弹窗）赋值的，上面的row就是传给子组件的form表单赋值的数据，因为原来row里面只有typeId, 无法和 v-model="form.type"对象绑定，这里给row手动添加一个type对象，select组件会根据key(typeId)查到对应的需要展现的数据（我以前认为是value，这里看起来应该是根据key）。

下面说的是el-checkbox-group的用法，直接上图：

<el-checkbox-group
                v-model="checkedAttrs"
              >
                <el-checkbox v-for="item in allAttrs" :key="item.id" :label="item.id">
                  {{ item.attrName }}
                </el-checkbox>
              </el-checkbox-group>


this.checkedAttrs = val2.map(item => {
            return item.id
          })

allAttrs 是数组对象，表示的是所有checkbox(也就是包括选中的和没有选中)， 注意这里显示文本是根据{{ item.attrName }}显示的，不是label。这里的label才是checkbox的绑定值，这里不能用对象绑定，用对象会有问题，而v-model="checkedAttrs"就是后台传过来的已勾选的数据，通常后台传过来的也是和allAttrs一样的数组对象，但是这里不能用数组对象，这里checkedAttrs里的内容要和label里内容是同样的，这里的label绑定的是id,那么checkedAttrs也是已勾选的数据的id数组，而不是对象数组，下面是映射方法，其中val2是后台传过来的对象数组，我们需要自己处理下：

this.checkedAttrs = val2.map(item => {
            return item.id
          })

萌新由于刚接触前端，很多知识也都是一知半解，这里只记录下一些用法总结，不正确的地方望各位大佬指正。