vue中element-ui 自定义商品规格管理组件

<template>
  <span>
    <p>
      <InputButton v-model="attrKeyInputValue" button-text="+ 新增规格" @confirm="handleAttrKeyInputConfirm" />
    </p>
    <div v-for="(item,index) in value" :key="index">
      <InputTag v-model="item.name" closable @close="handleAttrKeyClose(index)" />

      <br>
      <span style="margin-left: 20px">
        <span v-for="(vItem,vIndex) in item.value" :key="vIndex">
          <InputTag v-model="item.value[vIndex]" style="margin-right: 10px" closable @close="handleAttrValClose(index,vIndex)">{{ vItem }}</InputTag>
        </span>
        <el-input
          v-model="item.attr_val_input"
          class="input-new-tag"
          size="small"
          placeholder="请填写规格值"
          style="width: 200px;"
          @keyup.enter.native="handleAttrValInputConfirm(index)"
          @blur="handleAttrValInputConfirm(index)"
        />

      </span>
    </div>

  </span>
</template>

<script>
import InputTag from '@/components/InputEl/InputTag.vue'
import InputButton from '@/components/InputEl/InputButton.vue'

export default {
  name: 'GoodsSpec',
  components: { InputButton, InputTag },
  model: {
    prop: 'value',
    event: 'confirm'
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      attrKeyInputValue: ''
    }
  },
  watch: {

  },
  methods: {
    handleAttrKeyInputConfirm() {
      const attrKeyInputValue = this.attrKeyInputValue
      if (attrKeyInputValue) {
        this.value.push({
          name: attrKeyInputValue,
          value: [],
          attr_val_input: ''
        })
      }

      this.attrKeyInputValue = ''
    },

    handleAttrKeyClose(index) {
      this.$delete(this.value, index)
    },
    handleAttrValClose(index, vIndex) {
      this.$delete(this.value[index].value, vIndex)
    },
    handleAttrValInputConfirm(attrKey) {
      const attrValInputValue = this.value[attrKey].attr_val_input

      if (attrValInputValue) {
        this.value[attrKey].value.push(attrValInputValue)
      }
      this.value[attrKey].attr_val_input = ''
    }

  }
}
</script>

<style scoped>

</style>

实例：

 <GoodsSpec v-model="spec" />

spec值

[
                {
                    "name": "外观",
                    "value": [
                        "白色",
                        "蓝色",
                        "红色"
                    ],
                    "attr_val_input": ""
                },
                {
                    "name": "尺码",
                    "value": [
                        "39",
                        "40",
                        "41",
                        "42",
                        "43"
                    ],
                    "attr_val_input": ""
                }
            ]