vue-reverse/examples/components/product/parameter.vue

<template>
  <div>
    <div class="layout" v-if="parameterData">
      <template v-for="(attribute, index) in parameterData">
        <div class="item">
          <div class="label">{{attribute.name}}</div>
          <Select
            v-model="attribute.selected"
            transfer
            clearable
            class="select"
            @on-change="onChange">
            <Option
              v-for="(item, index) in attribute.list"
              :key="index"
              :value="item">
              {{item}}
            </Option>
          </Select>
          <Input
            class="input"
            v-model="attribute.text"
            icon="ios-add-circle"
            placeholder="添加参数选项"
            @on-enter="add(index)"
            @on-click="add(index)">
          </Input>
        </div>
      </template>
    </div>
    <error :text="error[data.keyword]" />
  </div>
</template>
<script>

export default {
  props: ['data', 'value', 'option', 'error'],
  computed: {
    parameterData () {
      return this.value.parameterData
    },
  },
  data () {
    return {

    }
  },
  methods: {
    add (index) {
      const current = this.parameterData[index]
      if (!current.text.trim()) return
      current.list.push(current.text)
      current.selected = current.text
      current.text = ''
      this.onChange()
    },
    onChange () {
      const data = this.parameterData.filter(i => i.selected).map(i => (
        {
          attribute_item_id: i.id,
          value: i.selected,
        }
      ))
      console.log(data)
      this.$hub.$emit(this.data.hub, {
        type: 'value',
        payload: Object.assign(this.value, { [this.data.keyword]: data }),
      })
    },
  },
}
</script>
<style lang="scss" scoped>

  .layout {
    padding: 10px;
    border: 1px solid #ddd;
  }

  .item {
    display: flex;
    align-items: center;
    padding: 4px;
  }

  .label {
    flex: 0 0 50px;
  }

  .select {
    margin: 0 6px;
  }

  .input {

  }

</style>