级联选择器的二维数组键值问题

  // 递归查询
    seachSort(tree, temp = []) {
      var exitNo = [
        "firstCateName",
        "firstCateLabelId",
        "secondCateName",
        "secondCateLabelId",
      ];
      for (let key of tree) {
        for (let node in key) {
          if (exitNo.includes(node)) {
            if (node.includes("LabelId")) { 
            //匹配有LabelId
              key["value"] = key[node];
              delete key[node];
            } else if (node.includes("Name")) {
            //匹配有Name
              key["label"] = key[node];
              delete key[node];
            }
          } else {
            if (key["cateLabelList"] && key["cateLabelList"].length > 0) {
              this.seachSort(key["cateLabelList"]);
            }
          }
        }
      }
      return tree;
    },
    // 获取自定义分类列表
    async definedCategories() {
      const res = await storeCateLabelList({
        storeId: localStorage.getItem("u"),
      });
      if (res.code == 200 && res.data) {
        console.log(res.data, "data");
        this.bizSelectData = this.seachSort(res.data).map((item) => {
          if (item.cateLabelList) {
            return {
              value: item.value,
              label: item.label,
              children: item.cateLabelList, //修改cateLabelList的键值为children
            };
          } else {
            return {
              value: item.value,
              label: item.label,
            };
          }
        });
        console.log(this.bizSelectData, "bizSelectData");
      }
    },

res.data的接口返回值为:json
{"code":200,"message":"操作成功","data":[{"firstCateLabelId":"768411388707078144","firstCateName":"111"},{"firstCateLabelId":"767443075915055105","firstCateName":"测试","cateLabelList":[{"secondCateLabelId":"767454466403205121","secondCateName":"测试啦啦啦"},{"secondCateLabelId":"767443120433397760","secondCateName":"测试二级"}]},{"firstCateLabelId":"767442846910251008","firstCateName":"测试自定义","cateLabelList":[{"secondCateLabelId":"767456469275639809","secondCateName":"自定义2"},{"secondCateLabelId":"767456438304899072","secondCateName":"自定义1"}]},{"firstCateLabelId":"687360797864624128","firstCateName":"78","cateLabelList":[{"secondCateLabelId":"767456497285201920","secondCateName":"123456"},{"secondCateLabelId":"687361062521012224","secondCateName":"784"},{"secondCateLabelId":"687360822166421505","secondCateName":"45"}]}],"traceId":"246d6ba60cfa274b"}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果后端返回的数组中包含父级和子级的信息,可以将父级和子级信息分别存储在不同的数组中,然后将父级数组作为级联选择器的第一级选项,子级数组作为级联选择器的第二级选项,并在选择父级后动态更新子级选项的数据源。 例如,假设后端返回的数据格式如下: ``` [ { "id": 1, "name": "Parent 1", "children": [ { "id": 11, "name": "Child 1-1" }, { "id": 12, "name": "Child 1-2" } ] }, { "id": 2, "name": "Parent 2", "children": [ { "id": 21, "name": "Child 2-1" }, { "id": 22, "name": "Child 2-2" } ] } ] ``` 可以将父级信息存储在一个数组中: ``` [ { "id": 1, "name": "Parent 1" }, { "id": 2, "name": "Parent 2" } ] ``` 将子级信息存储在另一个数组中: ``` [ { "parentId": 1, "children": [ { "id": 11, "name": "Child 1-1" }, { "id": 12, "name": "Child 1-2" } ] }, { "parentId": 2, "children": [ { "id": 21, "name": "Child 2-1" }, { "id": 22, "name": "Child 2-2" } ] } ] ``` 然后在 Vue 组件中,可以使用 v-model 指令绑定选中的父级和子级信息,同时使用 computed 计算属性动态更新子级选项的数据源。示例代码如下: ``` <template> <div> <el-cascader v-model="selected" :options="parentOptions" :props="props" @change="handleChange"></el-cascader> </div> </template> <script> export default { data() { return { selected: [], // 选中的父级和子级信息 parentOptions: [], // 父级选项 childOptions: [], // 子级选项 props: { // 自定义选项属性名称 value: 'id', label: 'name', children: 'children' } } }, computed: { // 根据选中的父级信息动态更新子级选项的数据源 childOptionsComputed() { const parentId = this.selected[0] const childOption = this.childOptions.find(item => item.parentId === parentId) return childOption ? childOption.children : [] } }, methods: { // 处理级联选择器的change事件 handleChange(value) { this.selected = value } }, mounted() { // 初始化父级选项和子级选项 this.parentOptions = this.data.map(item => { return { id: item.id, name: item.name } }) this.childOptions = this.data.map(item => { return { parentId: item.id, children: item.children } }) } } </script> ``` 在模板中,使用 el-cascader 组件渲染级联选择器,使用 v-model 指令绑定选中的父级和子级信息,使用 :options 属性绑定父级选项数据源,使用 :props 属性自定义选项属性名称,在 change 事件中更新选中的父级和子级信息。 在计算属性中,根据选中的父级信息动态更新子级选项的数据源。 在 mounted 钩子函数中,初始化父级选项和子级选项的数据源。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值