常规用法绑定的值为数组，但是项目中需要绑定的值为字符串才好，
两种解决方式，方式1：按常规写法来做，最后将数据处理成字符串给后端
方式2：直接绑定成字符串，不用来回转换格式
方式2比较方便，所以选择方式2来做
// dom结构
<el-form-item v-if="form.userType === 'subject'" label="登记主体所属区域" prop="belongArea"><el-cascader
style="width: 100%"
@visible-change="visibleChange"
:clearable="true"
v-model="form.belongArea"
:options="cascaderOptions"
:show-all-levels="false" //
:props="cascaderProps"
></el-cascader></el-form-item>
// data数据
export default {
data() {
form: {
belongArea: ''
},
cascaderProps: {
lazy: true,
emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值. 这个是选择值为字符串的关键属性！！！！！！！！！！
lazyLoad (node, resolve) {
const that = this
const { level } = node;
// 跟级别
if (level === 0) {
const root = [{
value: '中国',
label: '中国',
cantCode: 'CN',
leaf: level >= 2
}]
resolve(root);
} else {
console.log(node, 'node')
cantData(node.data.cantCode).then(res => {
if (res.success && res.data.data.length > 0) {
const list = res.data.data
const nodes = list.map( item => ({
value: item.shortName,
label: item.shortName,
cantCode:item.cantCode,
leaf: level >= 2
}))
resolve(nodes)
} else {
resolve([])
}
}).catch(err =>{
console.log(err, 'err');
resolve([])
})
}
}
}
}
}
methods：{
visibleChange(flag) {
console.log(this.form.belongArea);
if(flag && !this.form.belongArea) { // 判断如果它没有值则懒加载显示层级，// 这有个问题，回显后如果再重新选择的话，需要将当前值删除才能触发这个的逻辑
this.cascaderOptions = [{
value: '中国',
label: '中国',
cantCode: 'CN',
leaf: false
}]
}
},
}
通过这一系列的配置，可以将el-cascader的绑定值变为字符串
