vue + element级联选择器
element级联选择器cascader默认的是label和value,要修改成后台返回数据对应的字段,则设置
(1):props = “defaultData” , 然后在data中的 defaultData里把默认的label和value改成 name 和 id
@visible-change=handleShow(
e
v
e
n
t
)
表
示
下
拉
框
显
示
(
t
r
u
e
)
和
隐
藏
(
f
a
l
s
e
)
,
这
里
如
果
是
点
击
下
拉
框
显
示
的
时
候
再
调
接
口
,
则
可
以
在
event)表示下拉框显示(true)和隐藏(false),这里如果是点击下拉框显示的时候再调接口,则可以在
event)表示下拉框显示(true)和隐藏(false),这里如果是点击下拉框显示的时候再调接口,则可以在event为true的时候调接口
(2) 方法二: 如果 :props 上要设置多个效果,则直接在级联选择器 上 加 :props="{value: ‘id’, label: ‘jobTypeName’, checkStrictly: true}"
下方是我微信公众号的二维码,可以扫码关注以下,后期博文推送主要在公众号上面,有什么问题也可以通过公众号跟我发消息哦~
<el-cascader :options="jobOptions" :props="{value: 'id', label: 'jobTypeName', checkStrictly: true}"></el-cascader>
例如:实现如下效果:
代码如下:
<template>
<div>
<el-row>
<el-col :span="6">
<el-cascader :options="jobOptions" :props="defaultData" :show-all-levels="false" placeholder="职位类型" @visible-change="jobShow($event)">
<template slot-scope="{ node, data }">
<span>{{ data.jobTypeName }}</span>
</template>
</el-cascader>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
defaultData: {
value: 'id',
label: 'jobTypeName',
},
jobOptions: [], //职位类别
};
},
methods: {
//当点击职位类型下拉框的时候获取数据
jobShow(value) {
if (value) {
this.jobCategory();
}
},
// 职位类别列表
jobCategory() {
queryOfType({ data: {} }).then(res => {
if (res.code === 0) {
this.jobOptions = res.data;
} else {
this.$message.error(res.message);
}
})
},
},
}
</script>