vue|vue + element + el-cascader级联选择器 vue+element+el-cascader级联选择器

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的时候调接口
【vue|vue + element + el-cascader级联选择器】（2）方法二：如果 :props 上要设置多个效果，则直接在级联选择器上加 :props="{value: ‘id’, label: ‘jobTypeName’, checkStrictly: true}"

例如：实现如下效果：

文章图片

代码如下：

> 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); } }) }, }, }