vue 封装组件el-select，el-select组件值是对象的解决方案

1.效果（工作中遇到一个问题，记录一下）

1.1 核心代码

在用select组件的时候，官方给出的例子是option 里面的value绑定一个值（不能是对象，绑定的对象的话就会出问题）。但是在开发过程中，确实遇到了需要绑定对象的时候，看官方文档根本没发现怎么解决，后来通过百度，谷歌才知道，原来在select上面加上value-key = id ，然后在option里面的 :key="item.id"，就可以通过value传对象了

---

<template>
	<el-container class="add-container">
		<el-form-item label="商品属性:">
		  <el-drag-select value-key="id" v-model="form.goodsAttrAll" multiple placeholder="请选择">
		    <el-option class="prodAttr" v-for="(item, index) in shopType" :key="item.id" :label="item.name" :value="item">
		    </el-option>
		  </el-drag-select>
		</el-form-item>
		
		<el-form-item v-for="(item,index) of form.goodsAttrAll" :key="item.id"  :label="item.name">
		    <el-checkbox-group v-model="checkedEquipments[index]" @change="handleChange(item.id)">
		    {{checkedEquipments[index]}}
		    <el-checkbox v-for="data in item.typeNames" :label="data.id" :key="data.type">
		      {{data.type}}
		    </el-checkbox>
		  </el-checkbox-group>
		</el-form-item>
	<el-container>
</template>

<script>
import ElDragSelect from '@/components/DragSelect';
export default {
  props: {},
  data() {
    return {
      form: {
        goodsAttrAll:[]
      },
      shopType: [], //上面遍历的值从后端返回
    };
  },
  components: {
	ElDragSelect
  }
</script>

2.下面是一个el-select组件封装的demo效果

2.1 代码

2.1 组件代码

<template>
  <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple >
    <slot/>
  </el-select>
</template>

<script>
export default {
  name: 'DragSelect',
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  computed: {
    selectVal: {
      get() {
        return [...this.value]
      },
      set(val) {
        this.$emit('input', [...val])
      }
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.drag-select >>> .sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}

.drag-select >>> .el-tag{
  cursor: pointer;
}
</style>

2.2 调用组件

<template>
  <div class="components-container">
    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
      <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
    </el-drag-select>

    <div style="margin-top:30px;">
      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">{{ item }}</el-tag>
    </div>

  </div>
</template>

<script>
import ElDragSelect from '@/components/DragSelect' // base on element-ui

export default {
  name: 'DragSelectDemo',
  components: { ElDragSelect },
  data() {
    return {
      value: ['Apple', 'Banana', 'Orange'],
      options: [{
        value: 'Apple',
        label: 'Apple'
      }, {
        value: 'Banana',
        label: 'Banana'
      }, {
        value: 'Orange',
        label: 'Orange'
      }, {
        value: 'Pear',
        label: 'Pear'
      }, {
        value: 'Strawberry',
        label: 'Strawberry'
      }]
    }
  }
}
</script>