### 回答1：
要设置 Element UI 中的树形控件默认选中状态，可以通过以下步骤进行操作：
1. 在树形控件的数据源中，找到需要默认选中的节点。
2. 在该节点的数据对象中，设置 `checked` 属性为 `true`。
3. 在 `<el-tree>` 标签中，通过 `default-checked-keys` 属性指定需要默认选中的节点的 key 值，可以是一个数组或者字符串，多个 key 值之间用逗号分隔。
以下是一个示例代码：
```html
<template>
<el-tree :data="treeData" :default-checked-keys="defaultCheckedKeys"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '节点 1',
checked: true,
children: [
{
id: 2,
label: '节点 1-1',
checked: false
},
{
id: 3,
label: '节点 1-2',
checked: true
}
]
},
{
id: 4,
label: '节点 2',
checked: false
}
]
};
},
computed: {
defaultCheckedKeys() {
return this.treeData
.filter(node => node.checked)
.map(node => node.id.toString());
}
}
};
</script>
```
在上面的代码中，我们将节点 1 和节点 1-2 设置为默认选中状态，节点 2 不选中。`defaultCheckedKeys` 计算属性返回一个数组 `['1', '3']`，其中的 key 值需要是字符串类型，所以我们使用 `toString()` 方法进行转换。这样，打开页面时树形控件中就会默认选中节点 1 和节点 1-2。
### 回答2：
element ui tree 是一款 Vue.js 组件库提供的树形结构组件。 在 element ui tree 中，如果需要默认选中某些节点，可以通过设置 tree 的默认已选择的节点属性，来实现这个需求。
在代码中，我们需要给 tree 中的数据源中的相对应的节点添加一个 selected 属性，并且将其设置为 true，这个节点就会默认被选中了。
例如下面这个代码片段，其中的 data 数组中，我们给第二个节点添加了 selected 属性，并将其设置为 true：
```html
<template>
<el-tree
:data="data"
:props="defaultProps"
/>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}, {
label: '三级 1-1-2',
selected: true // 添加 selected 属性并且为 true，表示默认选中该节点
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}, {
label: '三级 2-1-2'
}]
}]
}]
};
},
defaultProps: {
children: 'children',
label: 'label'
}
}
</script>
```
这样，当我们渲染出 element ui tree 组件时，第二个节点“二级 1-1-2”就会默认被选中。
除此之外，在 element ui tree 中，还可以通过通过监听 tree 的 check/change 事件，来改变某个节点的选中状态，并将其设置为默认选中。在需要实现多选的场景中，也可以设置一个默认选中的节点的数组，通过遍历数组，将这些节点的选中状态改变，来实现多选的需求。
总的来说，element ui tree 支持通过设置 selected 属性来实现单选和默认选中的需求，而对于多选的场景，则需要借助 check/change 事件，来动态的改变节点的选中状态。
### 回答3：
Element UI是一款常用的Vue.js组件库，其中tree组件作为一种可以展示层次关系数据结构的重要组件之一，其提供默认选中功能可以方便用户操作和快速获取需要的数据。
在Element UI tree中默认选中的实现主要是通过选项属性 defaultCheckedKeys 和 defaultChecked 字段实现。其中 defaultCheckedKeys 属性为初始选中的keys数组，defaultChecked配置为一个方法，该方法接收tree节点和数据对象并返回一个布尔值，true表示选中，false表示不选中。具体实现如下：
1.通过defaultCheckedKeys属性设置默认选中的节点，例如设置树的第一层和第二层节点默认选中：
```html
<template>
<el-tree
:data="data"
:default-expanded-keys="[1, 2]"
:default-checked-keys="[11, 121, 122]"
node-key="id"
:check-strictly=true
:default-checked='defaultChecked'
:props="defaultProps">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-checkbox v-model="data.checked" :disabled="data.disabled"></el-checkbox>
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
defaultCheckedKeys: [11, 121, 122],
data: [
{
id: 1,
label: '一级 1',
children: [{
id: 11,
label: '二级 1-1',
children: [{
id: 121,
label: '三级 1-1-1',
children: [{
id: 1211,
label: '四级 1-1-1-1',
children:[{
id:12111,
label:'五级 1-1-1-1-1'
},{
id:12112,
label:'五级 1-1-1-1-2'
}]
}]
}, {
id: 122,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 21,
label: '二级 2-1'
}, {
id: 22,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 31,
label: '二级 3-1'
}, {
id: 32,
label: '二级 3-2'
}]
}
]
}
},
methods: {
defaultChecked(node, data) {
return data.id === 1211 || data.id === 12111
}
},
computed: {
defaultProps() {
return {
children: 'children',
label: 'label',
disabled: 'disabled'
}
}
}
}
</script>
```
2.通过defaultChecked配置方法设置默认选中的节点，例如设置id为 1211 和 12111两个节点默认选中：
```html
<template>
<el-tree
:data="data"
:default-expanded-keys="[1, 2]"
node-key="id"
:check-strictly=true
:default-checked='defaultChecked'
:props="defaultProps">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-checkbox v-model="data.checked" :disabled="data.disabled"></el-checkbox>
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [{
id: 11,
label: '二级 1-1',
children: [{
id: 121,
label: '三级 1-1-1',
children: [{
id: 1211,
label: '四级 1-1-1-1',
children:[{
id:12111,
label:'五级 1-1-1-1-1'
},{
id:12112,
label:'五级 1-1-1-1-2'
}]
}]
}, {
id: 122,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 21,
label: '二级 2-1'
}, {
id: 22,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 31,
label: '二级 3-1'
}, {
id: 32,
label: '二级 3-2'
}]
}
]
}
},
methods: {
defaultChecked(node, data) {
return data.id === 1211 || data.id === 12111
}
},
computed: {
defaultProps() {
return {
children: 'children',
label: 'label',
disabled: 'disabled'
}
}
}
}
</script>
```
通过以上两种方法可以快速实现Element UI tree的默认选中功能，方便用户快速获取需要的数据，提高交互效率。
6490
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
