javascript - 如何为 v-treeview 设置多个 item-children 属性
问题描述
假设我有如下结构的可变项目:
[
{
id: 1,
name: 'value1',
item_nested: [
{
id: 2,
name: 'value2',
},
{
id: 3,
name: 'value3',
nested_item: [
{
id: 4,
name: 'value4'
}
]
}
]
}
]
在 v-treeview 中,我们有带字符串的道具 item-children,它允许设置 withc 属性将作为子参考。在第一级,我希望该属性item_nested
为子级,第二级我希望nested_item
为子级,但是否可以为 item-children 设置多个值?
解决方案
VTreeView
使用单个string
作为孩子的键,所以 - 在不扩展/覆盖原始组件的情况下 - 我看不到为孩子提供替代键的方法。
但是,您始终可以“重新键入”要在 a 中显示的对象VTreeview
(此代码段仅适用于这种特定情况,但可以概括):
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
// "re-keying" items:
modifiedTreeviewItems() {
const updateItemKeys = (items) => {
if (!items.length) return []
const mapped = items.map((item) => {
const {
item_nested = [], nested_item = [], ...rest
} = item
const children = item_nested.length ? item_nested : nested_item.length ? nested_item : []
return {
...rest,
children: updateItemKeys(children),
}
})
return mapped
}
return updateItemKeys(this.treeviewItems)
},
},
data() {
return {
treeviewItems: [{
id: 1,
name: 'value1',
item_nested: [{
id: 2,
name: 'value2',
},
{
id: 3,
name: 'value3',
nested_item: [{
id: 4,
name: 'value4'
}]
}
]
}]
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-treeview :items="modifiedTreeviewItems" />
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
推荐阅读
- c - 为什么在指定 CLONE_THREAD 标志时克隆函数返回 -1?
- django - Vue.js + Axios 没有分配响应
- apache-flink - 无论状态后端如何,状态是否都保存在 TaskManager 的内存中?
- database - Cassandra等数据库中对Bloom Filter的需求
- java - Java:在 Java Swing 中实现服务方法
- python - 自动 Salesforce 登录
- java - 无法将已编译的 java avro 文件导入 Scala 代码库
- android - 上面有形状的android特殊按钮主题
- spring - 无法导入 org.springframework.test.context.ActiveProfiles;
- api - REST API 子端点的命名约定