elementui选择器多选时闪_element-ui 多选级联cascader 选择器回显问题

最新推荐文章于 2024-02-20 14:11:40 发布

原创最新推荐文章于 2024-02-20 14:11:40 发布

· 952 阅读

0 ·

版权

文章标签：

#elementui选择器多选时闪

在使用 Element UI 的级联选择器Cascader时，遇到后端返回的值与前端显示不一致的问题。本文提供了一个简单的处理方法，解决编辑时多选级联选择器的回显。主要涉及到将后端返回的字符串或数组转换为Cascader所需的格式，并通过递归处理实现回显。同时，文章提供了相关代码示例和详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家在使用element-ui的时候肯定会遇到这样一个问题

就是在你使用级联选择器的时候，

假设后台给你的数据是1,3,6, 而你的的级联选择器选中后绑定的值可能是这样的 [[1],[2,3],[4,5,6]] ,它直接将所有的父级都保存下来了。所以我们前端在编辑的时候进行回显就很难受，还要处理一下。

今天是我带来的最笨的方法进行处理操作，话不多说直接看代码吧

条件：

1、后端接口需要的字段是interfaceCateId ,值是字符串类型 '1,2,3'

2、前端请求到的接口是interfaceCateId,值是字符串类型1,2,3或者数组形式[1,2,3]

v-model="bindCategoryIds"

:options="categoryData"

size="small"

@change="changeClick"

:props="{ multiple: true, checkStrictly: true, }"

clearable>

export default {

name: "cascader",

data(){

return{

categoryData:[{

value: '1',

label: '指南',

children: [{

value: '2',

label: '设计原则',

children: [{

value: '3',

label: '一致'

}, {

value: '4',

label: '反馈'

}, {

value: '5',

label: '效率'

}, {

value: '6',

label: '可控'

}]

}, {

value: '7',

label: '组件',

children: [{

value: '8',

label: 'Basic',

children: [{

value: '9',

label: 'Layout 布局'

}, {

value: '10',

label: 'Button 按钮'

}]

}],

bindCategoryIds:[],

editFlagNum:0, //创建一个标识判断是否是编辑的时候

interfaceCateId:'3,7,10' //需要向接口传递的ids(假设编辑时后台传给的是3,7,10)

}

watch:{

editFlagNum(newVal){

if(newVal > 0){//判断是否为编辑的时候

let echoTreeArr = [];

let eachAry;

//回显分类value转为数组

if(typeof this.interfaceCateId == 'object'){

eachAry = this.interfaceCateId

}else if(typeof this.interfaceCateId == "undefined" || typeof this.interfaceCateId === null){

eachAry = []

}else{

eachAry = this.interfaceCateId.split(',')

}

let itemAry = [];//分类树组件，每一项的value数组

// 递归分类数据

let recursionCategory = (data) => {

let len = data.length;

for(let i = 0;i < len;i++){//循环data参数，匹配回显的value

itemAry.push(data[i].value);//构建分类树数组项,入栈

for(let j = 0;j < eachAry.length;j++){//遍历子节点分类value，拼凑成数组项value，并终止循环

if(eachAry[j] == data[i].value){//匹配到子节点value

echoTreeArr.push(JSON.parse(JSON.stringify(itemAry)));//push进树分类数据

eachAry.splice(j,1);//删除以匹配到的value

break;

}

if(eachAry.length <= 0){//所有回显value匹配完成后，跳出循环

break;

}else if(data[i].children && data[i].children.length > 0){// 如果存在子分类，递归继续

recursionCategory(data[i].children);

}

itemAry.pop();//出栈

}

recursionCategory(this.categoryData);//调用递归

this.bindCategoryIds = echoTreeArr;

console.log(bindCategoryIds, '处理后将要回显的数组')

}

mounted(){

this.editFlagNum = 2 //假设是编辑状态

methods:{

//选中后处理bindCategoryIds,为了与后端接口对接

changeClick(newVal){

let ids = [];

newVal.forEach((item) => {

ids.push(item[item.length - 1]);

})

this.interfaceCateId = ids.join(',');

console.log(this.interfaceCateId, '处理后将要传给后端的interfaceCateId')

}

标签：interfaceCateId,回显,value,label,eachAry,let,element,data,选择器

来源： https://blog.youkuaiyun.com/weixin_51634305/article/details/110424486