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

技术
©2020 ioDraw All rights reserved
JS基础重点知识实验总结(全)error: (-215:Assertion failed)解决方案逆向工程核心原理笔记(一)——Hello World-1特征工程详解PHP中的die、exit、return特朗普的"VIP疗法":正接受一种尚未获批的药物治疗HashMap实现LRU(最近最少使用)缓存更新算法三分钟看懂神经网络机器翻译SK海力士全球首发DDR5内存:频率冲上5600MHz、容量可达256GB日经:索尼和铠侠正积极申请华为供货许可