vue encapsulates the component El select, and the value of El select component is the object solution

1. Effect (record a problem in the work)

1.1 core code

When using the select component, the official example is that the value in option binds to a value (it can't be an object, and the bound object will cause problems). But in the development process, when we do encounter the need to bind objects, we didn't find out how to solve it by looking at the official documents. Later, through Baidu and Google, we learned that we added value key = ID to select, and then in option: key="item.id", we can transfer objects by value

<template>
	<el-container class="add-container">
		<el-form-item label="Commodity attribute:">
		  <el-drag-select value-key="id" v-model="form.goodsAttrAll" multiple placeholder="Please choose">
		    <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: [], //The value traversed above is returned from the backend
    };
  },
  components: {
	ElDragSelect
  }
</script>

2. The following is a demo effect encapsulated by an EL select component

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

<template>
  <div class="components-container">
    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="Please choose">
      <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>

Tags: Front-end Google Attribute

Posted on Fri, 08 Nov 2019 13:50:53 -0500 by env3rt