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>

• « 上一篇：Ubuntu 18.04 swap分区扩展
• » 下一篇：C#连接数据库（sql server）？