©2020-2024 ioDraw All rights reserved
<>1. effect （ There is a problem at work , Record it ）
<>1.1 Core code
In use select Component time , The official example is option
Inside value Bind a value （ Cannot be an object , Binding objects will cause problems ）. But in the development process , It's true that you need to bind objects , Looking at the official documents, I didn't find out how to solve it , Later through Baidu , Google knows , It turns out that select Plus
value-key = id , And then in the option Inside :key="item.id", You can pass value We've got a target
<template> <el-container class="add-container"> <el-form-item label=" Commodity attributes :"> <
el-drag-select value-key="id" v-model="form.goodsAttrAll" multiple placeholder="
Please select "> <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: [], // Returns the value from the back end of the above }; }, components: { ElDragSelect
} </script>
<>2. Here's one el-select Component encapsulated demo effect
<>2.1 code
<>2.1 Component code
<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 Call component
<template> <div class="components-container"> <el-drag-select v-model="value"
style="width:500px;" multiple placeholder=" Please select "> <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>
Technology