联动选择初级

<template>
    <div>
        <div class="test">
          <button v-for="(item, index) in allOptions.options"  
          :key="index" :class="['option', item.isCheckout ? 'checked' : '']" 
          @click="handleSome(item, 'options', 'one')">
            {{ item.name }}
          </button>
        </div>
        <div class="test">
          <button v-for="(item, index) in allOptions.options2"  
          :key="index" :class="['option', item.isCheckout ? 'checked' : '']" 
          @click="handleSome(item, 'options2', 'two')">
            {{ item.name }}
          </button>
        </div>
        <div class="test">
          <button v-for="(item, index) in allOptions.options3"  
          :key="index" :class="['option', item.isCheckout ? 'checked' : '']" 
          @click="handleSome(item, 'options3', 'three')">
            {{ item.name }}
          </button>
        </div>
    </div>
</template>

<script>
 data(){
    return {
       allOptions: {
        options: [],
        options2: [],
        options3: [],
      },
      tableList10086: []
        }
    },

methods： {
    testData() {
      const tableList = [
        {id: 52, good_id: 49, one: "金属", two: "白色", three: "18cm", inventory: "1", price: "1.00"},
        {id: 53, good_id: 49, one: "塑料", two: "白色", three: "12cm", inventory: "2", price: "2.00"},
        {id: 54, good_id: 49, one: "金属", two: "黑色", three: "18cm", inventory: "3", price: "3.00"},
        {id: 55, good_id: 49, one: "塑料", two: "黑色", three: "15cm", inventory: "4", price: "4.00",},
        {id: 56, good_id: 49, one: "铝", two: "紫色", three: "15cm", inventory: "5", price: "5.00"}
      ]
      
      const tableList1 = [
        {id: 52, good_id: 49, one: "", two: "白色", three: "18cm", inventory: "1", price: "1.00"},
        {id: 53, good_id: 49, one: "", two: "白色", three: "12cm", inventory: "2", price: "2.00"},
        {id: 54, good_id: 49, one: "", two: "黑色", three: "18cm", inventory: "3", price: "3.00"},
        {id: 55, good_id: 49, one: "", two: "黑色", three: "15cm", inventory: "4", price: "4.00",},
        {id: 56, good_id: 49, one: "", two: "紫色", three: "15cm", inventory: "5", price: "5.00"}
      ]

      this.tableList10086 = tableList1
      let options =this.tableList10086.map(item => {
        return {
          name: item.one,
          isCheckout: false
        }
      })
      let options2 = this.tableList10086.map(item => {
        return {
          name: item.two,
          isCheckout: false
        }
      })
      let options3 = this.tableList10086.map(item => {
        return {
          name: item.three,
          isCheckout: false
        }
      })

      /**
       * map 对象去重
       * @param {Array} arr 要去重的数组
       * @returns {Array} 去重后的数组
       * @example
       * const arr = [{name: 'a'}, {name: 'b'}, {name: 'a'}]
       * let map = new Map()
       * for(let item of arr) {
       *    map.set(item.name, item) // 参数一表示要去重的值，参数二表示去重后的值
       * }
       * const res = [...map.values()] // 去重之后的数组
       * console.log(res)
       */
      let map = new Map()
      for(let item of options) {
        map.set(item.name, item)
      }
      options = [...map.values()].filter(item => item.name !== '')

      map = new Map()
      for(let item of options2) {
        map.set(item.name, item)
      }
      options2 = [...map.values()].filter(item => item.name !== '')

      map = new Map()

      for(let item of options3) {
        map.set(item.name, item)
      }
      options3 = [...map.values()].filter(item => item.name !== '')

      this.allOptions = {
        options,
        options2,
        options3
      }
    },

    handleSome(item, type, key) {
      this.allOptions[type] = this.allOptions[type].map(i => {
        if(i.name === item.name) {
          i.isCheckout = true
        } else {
          i.isCheckout = false
        }
        return i
      })

      // 对应的数据
      const newD = this.tableList10086.filter(i => i[key] === item.name)
      const type1 = {
        'options': 'one',
        'options2': 'two',
        'options3': 'three'
      }
      Object.keys(this.allOptions).forEach(K => {
        // 不要自己和自己对比
        if(K !== type) {
          this.allOptions[K] = this.allOptions[K].map(i => {
            return {
              name: i.name,
              isCheckout: newD.some(item => item[type1[K]] === i.name)
            }
          })
        }
      })
      console.log(newD);
    }

}
</script>

<style>

  .test {
    display: flex;
    .option {
      margin: 10px;
    }

    .checked {
      background-color: pink;
    }
  }
</style>