vue关于新增一行与删除的问题，求思路

Question

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <div>
    <div>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="handleDel">删除</el-button>
    </div>
    <el-button @click="handleAdd">添加</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
    }
  },
  methods: {
    handleDel() {

    },
    handleAdd() {
      
    }
  }
}
</script>

我想实现是点击新增后可以新增一个select，数据还是那些数据，只不过选过的改为禁用
在表格里我们可以直接给数组里push，但是我这里不管新增多少了，数据都是一样的，我觉得不需要把options改为数组 然后再往里push吧 比如这样：

data(){
  return {
    options:[
      list: [],
      list: [] // 这里是新增push进来了 然后去遍历 options
    ]
  }
}

没思路，还请指教

Answer 1

<template>
  <div>
    <div>
      <div v-for="(item,index) in values">
        <el-select v-model="item.value" @change="selectChange(index)" placeholder="请选择">
          <el-option
            v-for="items in options"
            :key="items.value"
            :label="items.label"
            :value="items.value"
            :disabled="items.status == 0"
          >
          </el-option>
        </el-select>
        <el-button @click="handleDel">删除</el-button>
      </div>

    </div>
    <el-button @click="handleAdd">添加</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '选项1',
            label: '黄金糕',
            status: 1
          }, {
            value: '选项2',
            label: '双皮奶',
            status: 1
          }, {
            value: '选项3',
            label: '蚵仔煎',
            status: 1
          }, {
            value: '选项4',
            label: '龙须面',
            status: 1
          }, {
            value: '选项5',
            label: '北京烤鸭',
            status: 1
          }],
        values: [{value: ''}]

      }
    },
    methods: {
      handleDel() {
        console.log(this.values)
      },
      handleAdd() {
        this.values.push({value: ''})
      },
      selectChange(index) {
       for (let item of this.options) {
         if (item.value === this.values[index].value) {
           item.status = 0
         }
       }
      }
    }
  }
</script>