使用element框架级联选择器数据不一致解决

时间：2024-04-03 17:28:35

一、解决问题：当后台传过来的数据格式没有children的时候还加一个children：[]，造成多渲染一个空选择框
1.解决方法：

<el-cascader
    @change="addHandleChange"
    :options="options"
    change-on-select
    :props="props"
    v-model="selectedOptions1"
    >
  </el-cascader>

2.使用js方法去除空[]，和空{}
实现效果
使用element框架级联选择器数据不一致解决
//获取菜单树
getTree(this.addForm.usId).then(response1=>{
console.log(this.addForm.usId)
this.options = response1.data

//过滤参数，去掉空值
toType(this.options)

filterNull(this.options)

function toType (obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}

function filterNull (o) {

for (var key in o) {
if (o[key] === null) {
delete o[key]
}
if (toType(o[key]) === ‘string’) {
o[key] = o[key].trim()
if (o[key].length === 0) {
delete o[key]
}
} else if (toType(o[key]) === ‘object’) {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === ‘array’) {
o[key] = filterNull(o[key])
if (o[key].length === 0) {
delete o[key]
}
}
}
return o
}

二、层级数据不一致
解决问题：label value 不一致

<el-form-item label="仓库">
        <el-cascader
      :options="options"
      v-model="selectedOptions"
      @change="editHandleChange" :props="props"
    >
    data()里面：
    props: {
        value: "usId",
        label:'usName',
        children: "warehouseList"
      },

把不一致的数据改成一致的

//获取用户所拥有的系统
     getUserSysAndWare().then(response3=>{                  
       //element框架级联要求，层级的key需一样，用props绑定，变成json字符串，全局替换单词为另一个
        let str = JSON.stringify(response3.data).replace(/warehouseId/g,'usId')
        str = str.replace(/warehouseName/g,'usName')
        this.options = JSON.parse(str)
        console.log(this.options)
     })

相关文章