vue3 Select 下拉选择器数据格式改成自定义key

ChinaBiuBiuBiu

于 2024-02-04 13:55:46 发布

阅读量415

点赞数 8

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/chinabiubiubiu/article/details/136024590

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Select选择器官网地址

当前数据格式

改成格式

[

{
id: 'id',
pid: 'pid', //可能多个0
name: 'name',
code: 'code', /
}

...

]

[ {
code: 'code',
label: 'label',
children: 'children',
}

.....

]

<template>
    <vxe-column field="relationShipName" title="关系" align="center" min-width="120">
        <template #default="{ row }">
            <el-tree-select
            v-model="row.relationShip"
            :props="props"
            filterable
            value-key="code"
            node-key="code"
            :data="relationShipTreeData"
            :render-after-expand="false"
            @change="checkGx(row)"
                  />
            </template>
        </vxe-column>
</template>
<script setup>
    const props = {
      //value: 'id',
      code: 'code',
      label: 'label',
      children: 'children',
    }
    //点击事件
    const clearHz = (row) => {
      
    }

    //获取字典数据--转化成select标准格式
    const getDictionary = () => {
      proxy.$api.a.b.dictionary('relationShip')
          .then(res =>{
            state.relationShipTreeData = transformToTree(res.data.data);
          })
          .catch(err => {})
    }

    // 转换函数
    const transformToTree = (arr) =>{
      let map = {}, node, roots = [], i;
      for (i = 0; i < arr.length; i += 1) {
        map[arr[i].id] = i;
        arr[i].code = arr[i].code;
        arr[i].label = arr[i].name;
        arr[i].children = [];
      }
      for (i = 0; i < arr.length; i += 1) {
        node = arr[i];
        if (node.pid !== 0) {
          arr[map[node.pid]].children.push(node);
        } else {
          roots.push(node);
        }
      }
      return roots;
    }
</script>