element 下拉框联动_element-ui select 二级联动

在使用select 选择框时，2个select 怎么关联在一起(第一个值发生变化，第二个select值随第一个变化而不同)

两个输入框代码

v-for="item in select1"

:key="item.value"

:label="item.label"

:value="item.value">

placeholder="请输入查询内容" :loading="loading" @change="getList($event)">

v-for="item in select2"

:key="item.value"

:label="item.label"

:value="item.value">

查询

首先第一个select要和第二个select 的值关联在一起

let select1= [

{value: 'role', label: '角色'},

{ value: 'version', label: '角色版本号'},

{value: 'env', label: '环境'}

]

let allrole= [

{pro:'role',label: 'pub'},{pro: 'role',label: 'core'},

{pro:'env',label: 'test'},{pro: 'pro',label: 'pro'},

{pro:'version',label: '1.1.2'},{pro: 'version',label: '1.1.1'}

]

显示操作代码块

export default {

data () {

return {

select1: select1,

loading: false,

filters: {

value1: '',

value2: ''

select2:[]

}

methods: {

getRole (prov) {

let roles = []

this.select2= []

for (var val of allrole) {

if (prov===val.pro) {

console.log(val)

roles.push({label: val.label,value: val.label})

}

this.options1 = roles

}

getList (opt) {

console.log(opt)

}

这样就实现了select的二级联动

element 下拉框联动_element-ui select 二级联动相关推荐

c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
Element下拉框自定义搜索方法
Element下拉框自定义搜索方法根据官方文档的api,自定义element的select组件输入提示需要配置filter-method(自定义搜索方法)和filterable(是否可搜索),htm ...
element 下拉框 el-select 自定义控制某项禁止选择
vue element 下拉框 el-select 自定义控制某项 el-option 禁止选择驾驶员,押运员不能同时选择同一个人例如:驾驶员选择张三押运员禁止选张三如果押运员选张三驾驶员 ...
Excel制作导入模板，多级联动下拉框（一整列的设置），修改一级下拉框内容，自动清空二级内容
目录效果展示一.数据准备二.模板制作原因1:为空原因二:名称管理器数据有误三.修改一级下拉框内容,自动清空二级内容 1,效果演示 2,实际操作效果展示一.数据准备 1,新建一张表,在s ...
手动清空Element Select选择框内容 v-model 和 option下拉框选项导致无法select选中，或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据科目选中后的内容,来进行搜索,所以当科目清空后名称/ID 需要清空 v-model 的值.以及 el-op ...
vue+element下拉框实现二级联动
参考文章:https://blog.csdn.net/qq_42341025/article/details/86601093 <el-form-item label-width="8 ...
element 下拉框中树节点选中之后不收回下拉框
element UI 下拉框选项包含树节点 <sg-selectref="select"size="small"clearableplaceholder= ...
layui多级联动下拉框的实现_简单三级联动的实现
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...
javascript实现下拉条联动_js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 String path = request.getContextPath(); String basePath = ...
jsp下拉框传到html下拉框,在一个jsp页面实现二级下拉框联动
在一个jsp页面实现二级下拉框联动,实时读取数据库数据. 在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp,ma ...

element 下拉框联动_element-ui select 二级联动

element 下拉框联动_element-ui select 二级联动相关推荐

最新文章

热门文章