VUE element ui根据数组生成多个互不干扰的下拉菜单并获取对应参数
直接放图和代码效果图:1.默认初始效果2.选择后效果代码:<template><basic-container><h2>VUE element ui根据数组生成多个互不干扰的下拉菜单并获取对应参数</h2><el-row><el-col><el-button @click="aaa">输出下拉数组</el-b
·
直接放图和代码
效果图:
1.默认初始效果
2.选择后效果
代码:
<template>
<basic-container>
<h2>VUE element ui根据数组生成多个互不干扰的下拉菜单并获取对应参数</h2>
<el-row>
<el-col>
<el-button @click="aaa">输出下拉数组</el-button>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="6" v-for="(item,index) in imgList" style="padding-top: 10px;">
<el-card style="width: 100%; height: 280px;" :body-style="{ padding: '0px' ,width:'100%',height:'100%', display: 'flex',cursor:'pointer'}"
shadow="hover">
<div style="position: relative; width: 100%;" class="check_box">
<el-dropdown @command="sumTypeCkeck" @visible-change="set_index(index)" style="position: absolute;right: 10px; top: 5px; z-index: 1;">
<span class="el-dropdown-link" style="color: #FFFFFF;">
{{sumType[index]}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in sumTypeArray[index]" v-text="item" :command="item"></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-image :src="item.img" onerror="this.style.display='none'" style="max-height: 100%;max-width: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%)">
</el-image>
<div style="font-size: 16px;position: absolute;bottom: 0; background-color: rgba(150, 150, 150, 0.35); height: 30px; width: 100%; text-align: center; line-height: 30px;color: yellow;">{{item.title}}</div>
</div>
</el-card>
</el-col>
</el-row>
</basic-container>
</template>
<script>
import ThreeDmodel from '../../components/4D/3Dmodel.vue'
export default {
components: {
ThreeDmodel
},
data() {
return {
imgList: [], //显示墙面的数组
index:0, //第几个下拉框
sumTypeArray: [[0,1, 2, 3, 4, 5],[0,9,10],[0,110,120],[0,119,911],[0,5,4],[0,3,8],[0,41,514]],//下拉参数值
sumType: [], //选中(默认)值
};
},
mounted() {
for (var i = 0; i < 6; i++) {
this.imgList.push({
title: i + 1 + '面',
img: 'http://192.168.10.67:8000/media/77/test/images/ABC%E5%A1%94%E6%A5%BC%E7%AB%8B%E9%9D%A220120824_t3_2/glass/C-LM-02-11-20.png'
})
}
for(var i=0;i<this.imgList.length;i++){
this.sumType.push(0)
}
},
methods: {
sumTypeCkeck(type) {
this.sumType[this.index] = type
this.sumType=[...this.sumType]//ES6拓展运算符生成新的props对象
// console.log(type)
// console.log(this.index)
},
set_index(index) {
this.index = index
},
aaa(){
console.log(this.sumType)
},
},
}
</script>
<style>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)