当前位置：首页 > news >正文

妹妹用这个

news 2026/5/26 11:09:04

HTML代码

<script src="//unpkg.com/vue@2/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script> <div id="app"> <template> 一级<el-select v-model="value1" placeholder="请选择"> <el-option ref="xx1" v-for="item in item1Values" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> 二级<el-select v-model="value2" placeholder="请选择" @visible-change="item2Change"> <el-option ref="xx2" v-for="item in item2Values" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> 三级<el-select v-model="value3" placeholder="请选择" @visible-change="item3Change"> <el-option ref="xx3" v-for="item in item3Values" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> </div>

CSS

@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");

var Main = { data() { return { value1: '', value2: '', value3: '', result: [ { value: '一级-item1', label: '一级-item1', children: [ { value: '一级-item1-二级-item1', label: '一级-item1-二级-item1', children: [ { value: '一级-item1-二级-item1-三级item1', label: '一级-item1-二级-item1-三级item1', }, { value: '一级-item1-二级-item1-三级item2', label: '一级-item1-二级-item1-三级item2', }, { value: '一级-item1-二级-item1-三级item3', label: '一级-item1-二级-item1-三级item3', } ] }, { value: '一级-item1-二级-item2', label: '一级-item1-二级-item2', children: [ { value: '一级-item1-二级-item2-三级item1', label: '一级-item1-二级-item2-三级item1', }, { value: '一级-item1-二级-item2-三级item2', label: '一级-item1-二级-item2-三级item2', }, { value: '一级-item1-二级-item2-三级item3', label: '一级-item1-二级-item2-三级item3', } ] }, { value: '一级-item1-二级-item3', label: '一级-item1-二级-item3', children: [ { value: '一级-item1-二级-item3-三级item1', label: '一级-item1-二级-item3-三级item1', }, { value: '一级-item1-二级-item3-三级item2', label: '一级-item1-二级-item3-三级item2', }, { value: '一级-item1-二级-item3-三级item3', label: '一级-item1-二级-item3-三级item3', } ] } ] }, { value: '一级-item2', label: '一级-item2', children: [ { value: '一级-item2-二级-item1', label: '一级-item2-二级-item1', children: [ { value: '一级-item2-二级-item1-三级item1', label: '一级-item2-二级-item1-三级item1', }, { value: '一级-item2-二级-item1-三级item2', label: '一级-item2-二级-item1-三级item2', }, { value: '一级-item2-二级-item1-三级item3', label: '一级-item2-二级-item1-三级item3', } ] }, { value: '一级-item2-二级-item2', label: '一级-item2-二级-item2', children: [ { value: '一级-item2-二级-item2-三级item1', label: '一级-item2-二级-item2-三级item1', }, { value: '一级-item2-二级-item2-三级item2', label: '一级-item2-二级-item2-三级item2', }, { value: '一级-item2-二级-item2-三级item3', label: '一级-item2-二级-item2-三级item3', } ] }, { value: '一级-item2-二级-item3', label: '一级-item2-二级-item3', children: [ { value: '一级-item2-二级-item3-三级item1', label: '一级-item2-二级-item3-三级item1', }, { value: '一级-item2-二级-item3-三级item2', label: '一级-item2-二级-item3-三级item2', }, { value: '一级-item2-二级-item3-三级item3', label: '一级-item2-二级-item3-三级item3', } ] } ] }, { value: '一级-item3', label: '一级-item3', children: [ { value: '一级-item3-二级-item1', label: '一级-item3-二级-item1', children: [ { value: '一级-item3-二级-item1-三级item1', label: '一级-item3-二级-item1-三级item1', }, { value: '一级-item3-二级-item1-三级item2', label: '一级-item3-二级-item1-三级item2', }, { value: '一级-item3-二级-item1-三级item3', label: '一级-item3-二级-item1-三级item3', } ] }, { value: '一级-item3-二级-item2', label: '一级-item3-二级-item2', children: [ { value: '一级-item3-二级-item2-三级item1', label: '一级-item3-二级-item2-三级item1', }, { value: '一级-item3-二级-item2-三级item2', label: '一级-item3-二级-item2-三级item2', }, { value: '一级-item3-二级-item2-三级item3', label: '一级-item3-二级-item2-三级item3', } ] }, { value: '一级-item3-二级-item3', label: '一级-item3-二级-item3', children: [ { value: '一级-item3-二级-item3-三级item1', label: '一级-item3-二级-item3-三级item1', }, { value: '一级-item3-二级-item3-三级item2', label: '一级-item3-二级-item3-三级item2', }, { value: '一级-item3-二级-item3-三级item3', label: '一级-item3-二级-item3-三级item3', } ] } ] } ], item1Values: [], item2Values: [], item3Values: [], item2Map: new Map(), item3Map: new Map() } }, created() { this.result.forEach(item1 => { this.item1Values.push({value: item1.value, label: item1.label}); let item2Value = []; item1.children.forEach(item2 => { this.item2Values.push({value: item2.value, label: item2.label}); item2Value.push({value: item2.value, label: item2.label}); let item3Value = []; item2.children.forEach(item3 => { this.item3Values.push({value: item3.value, label: item3.label}); item3Value.push({value: item3.value, label: item3.label}) }) this.item3Map.set(item2.value, item3Value); }) this.item2Map.set(item1.value, item2Value); }) }, methods: { item2Change(flag) { if (flag) { if (this.value1 !== '' && this.value1 !== null && this.value1 !== undefined) { this.item2Values = this.item2Map.get(this.value1); } else { this.item2Values = []; this.item2Map.forEach((value, key) => { this.item2Values.push(...value) }) } } }, item3Change(flag) { if (flag) { if (this.value2 !== '' && this.value2 !== null && this.value2 !== undefined) { this.item3Values = this.item3Map.get(this.value2); } else { this.item3Values = []; this.item3Map.forEach((value, key) => { this.item3Values.push(...value) }) } } }, } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')

查看全文

http://www.jsqmd.com/news/845137/