循环拿到这个数组的最后的label data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }]
时间: 2024-05-01 13:22:00 浏览: 36
可以使用递归函数来循环拿到这个数组的最后的label,代码如下:
```
function getLastLabel(data) {
if (data[0].children) {
return getLastLabel(data[0].children);
} else {
return data[0].label;
}
}
const data = [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}];
const lastLabel = getLastLabel(data);
console.log(lastLabel); // 输出:三级 1-1-1
```
该函数接收一个数组作为参数,首先判断该数组的第一个对象是否有 children 属性,如果有则递归调用该函数,直到最后一个 children 为 undefined,此时返回该对象的 label 属性。
相关问题
data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' }在vue3中的写法
在Vue 3中,如果要使用树形组件,可以使用`<Tree>`组件,其代码示例如下:
```html
<template>
<Tree :data="data" :props="defaultProps"></Tree>
</template>
<script>
import { defineComponent } from 'vue';
import Tree from 'element-plus/lib/el-tree';
export default defineComponent({
components: {
Tree
},
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
}
]
}
]
},
{
label: '一级 3',
children: [
{
label: '二级 3-1',
children: [
{
label: '三级 3-1-1'
}
]
},
{
label: '二级 3-2',
children: [
{
label: '三级 3-2-1'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
});
</script>
```
需要注意的是,需要使用`import Tree from 'element-plus/lib/el-tree';`导入`<Tree>`组件,同时需要在`components`中注册该组件。默认情况下,`<Tree>`组件的数据格式为:
```js
[
{
label: '节点1',
children: [
{
label: '节点1-1',
children: [
{
label: '节点1-1-1'
}
]
}
]
},
{
label: '节点2'
}
]
```
如果需要使用其他格式的数据,可以通过`props`属性进行设置,如上述示例中的`defaultProps`属性。
value: '', label: '', children: 格式的全世界城市级联js
您想了解全球城市级联的 JavaScript 代码格式,可以参考如下示例:
```javascript
// 定义城市数据
const cityData = [
{
value: 'beijing',
label: '北京市',
children: [
{
value: 'dongcheng',
label: '东城区'
},
{
value: 'xicheng',
label: '西城区'
},
{
value: 'chaoyang',
label: '朝阳区'
},
// 其他区县...
]
},
{
value: 'shanghai',
label: '上海市',
children: [
{
value: 'huangpu',
label: '黄浦区'
},
{
value: 'xuhui',
label: '徐汇区'
},
{
value: 'jingan',
label: '静安区'
},
// 其他区县...
]
},
// 其他城市...
];
// 城市级联组件
const Cascader = () => {
const [selectedCity, setSelectedCity] = useState([]);
const handleCityChange = (value) => {
setSelectedCity(value);
};
return (
<Cascader options={cityData} onChange={handleCityChange} value={selectedCity} />
);
};
```
这是一个基于 `antd` 组件库实现的城市级联示例,其中 `value`、`label`、`children` 分别表示每个选项的值、显示文本和子选项列表。您可以根据自己的需求修改数据结构和组件的实现方式。