ElementUI 列表组件：二级联动和三级联动示例
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>ElementUI 列表组件：二级联动和三级联动示例</title>
<link rel='stylesheet' href='https://unpkg.com/element-ui/lib/theme-chalk/index.css'>
</head>
<body>
<div id='app'>
<el-row>
<el-col :span='12'>
<el-form-item label='二级联动'>
<el-select v-model='selectedOption' placeholder='请选择'>
<el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
<el-select v-model='selectedSubOption' placeholder='请选择' multiple>
<el-option v-for='subOption in subOptions' :key='subOption.value' :label='subOption.label' :value='subOption.value'></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='三级联动'>
<el-select v-model='selectedOption2' placeholder='请选择'>
<el-option v-for='item in options2' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
<el-select v-model='selectedSubOption2' placeholder='请选择' multiple>
<el-option v-for='subOption in subOptions2' :key='subOption.value' :label='subOption.label' :value='subOption.value'></el-option>
</el-select>
<el-select v-model='selectedSubOption3' placeholder='请选择' multiple>
<el-option v-for='subOption in subOptions3' :key='subOption.value' :label='subOption.label' :value='subOption.value'></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/element-ui/lib/index.js'></script>
<script>
new Vue({
el: '#app',
data() {
return {
selectedOption: '',
options: [{
value: 'option1',
label: '选项1'
}, {
value: 'option2',
label: '选项2'
}, {
value: 'option3',
label: '选项3'
}],
selectedSubOption: [],
subOptions: [{
value: 'subOption1',
label: '子选项1'
}, {
value: 'subOption2',
label: '子选项2'
}, {
value: 'subOption3',
label: '子选项3'
}],
selectedOption2: '',
options2: [{
value: 'option1',
label: '选项1'
}, {
value: 'option2',
label: '选项2'
}, {
value: 'option3',
label: '选项3'
}],
selectedSubOption2: [],
subOptions2: [{
value: 'subOption1',
label: '子选项1'
}, {
value: 'subOption2',
label: '子选项2'
}, {
value: 'subOption3',
label: '子选项3'
}],
selectedSubOption3: [],
subOptions3: [{
value: 'subOption1',
label: '子选项1'
}, {
value: 'subOption2',
label: '子选项2'
}, {
value: 'subOption3',
label: '子选项3'
}]
}
}
})
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ogNL 著作权归作者所有。请勿转载和采集!