Vue3中级联选择器(cascader)案例

用户9914333

发布于 2023-09-06 13:18:09

4470

发布于 2023-09-06 13:18:09

文章被收录于专栏：bug收集bug收集

bug收集：专门解决与收集bug的网站 Element plus 的表单组件中，有一个级联选择器(cascader)，专门用于多个下拉列表的联动

代码如下：

<el-cascader
            v-model="value"
            :options="data.cateList"
            :props="props"
            @change="handleChange"
          />

‍

其中:

v-model 是选择后将选择的结果进行关联的名称

options: 即是显示级联组件中的数据

props: 配置选项，具体配置项，可参考官方文档

change: 当选择发生改变时，需要进行的事件处理

都比较简单，其中最重要的是options, 需要让我们的数据格式符合组件要求的格式

options 要求的数据格式：

const options = [
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency",
          },
        ],
      },
    ],
  }]

‍

后台返回的数据格式：

[{id: 1, Name: '服装', pId: 0, state: 1, remark: null},
{id: 2, Name: '食品', pId: 0, state: 1, remark: null},
{id: 3, Name: '男装', pId: 1, state: 1, remark: null},
{id: 4, Name: '女装', pId: 1, state: 1, remark: null},
{id: 5, Name: '裤子', pId: 1, state: 1, remark: null},
{id: 6, Name: '连衣裙', pId: 4, state: 1, remark: null},
{id: 7, Name: '雪纺衫', pId: 4, state: 1, remark: null},
{id: 8, Name: '短裤', pId: 5, state: 1, remark: null},
{id: 9, Name: '衬衫', pId: 3, state: 1, remark: null}]

在这里我们就需要对于后台数据进行处理后，再绑定给控件

下面分享处理数据的两个方法：

1. 将扁平数据转成树形数据的方法

export function
GetTreeData(data:any):Array<any>{
  var TreeData=[];
  var map = new Map(); //存在id,对应所在的内存地址
  var outputObj,pid ;
  for(var i = 0; i<data.length;i++){
  pid = data[i].pid;
  if(map.has(pid)){
    //存在，将些信息，加入到对应id=pid的对象上的children
    if (!map.get(pid).children)
        map.get(pid).children = [];
        var obj = new Object(data[i]);
        map.get(pid).children.push(obj);
        map.set(data[i].id,obj);
    }else if(!map.has(pid)&&pid==0){
      //这里处理pid不存在，且pid 为0的处理，pid不存在，且不为0的，程序不考虑这种情况
        outputObj = new Object(data[i]);
        TreeData.push(outputObj);
        map.set(data[i].id,outputObj);
    }
  }
  return TreeData;
}

2. 数据适配方法，修改对应的键名

export function
dataAdapter(HouData:Array<object>,RelationObj:object){
    // newArr是返回的新数组
    let newArr:Array<any> = [];
    // 不需要用map或者filter来循环产生新数组，所以用forEach
    HouData.forEach((item)=>{
    // new一个新对象把它每次循环的结果放到新数组里面去
        let o = new Object();
        o = {...item};
        for(let key in RelationObj){
        // 把这个对象里原来对应的值（键名和键值）给它删掉
              delete o[RelationObj[key as keyof typeof RelationObj]];
              // 新对象的键名对应的值等于老对象的键名
              o[key as keyof typeof o] = item[RelationObj[key as keyof typeof
              RelationObj]];
        }
        newArr.push(o);
        })
    return newArr;
}

组件调用方法的代码：

import productCategory from "./../../hooks/categoryManage";
import productCategoryStore from
"./../../store/productCategoryStore";
import { storeToRefs } from "pinia";
const { list } = storeToRefs(productCategoryStore());
const data = reactive({
    category:[],
    cateList:[]
});
watch(list,(newValue,oldValue)=>{
//1. 改变字段名
   let myData=dataAdapter(list.value,
        {value:"id",id:"id",label:"categoryName",pid:"pId"});
//2. 将数据变成字符串
   data.cateList = GetTreeData(myData);
});

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-08-16，如有侵权请联系 cloudcommunity@tencent.com 删除