<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>
联动选择初级
最新推荐文章于 2024-08-29 14:26:44 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)