<el-select v-model="ujbForm.departmentTree" multiple placeholder="请选择" @change="clickDepartmentId"> <el-option v-for="item in departmentTreeData" :key="item.departmentId" :label="item.departmentName" :value="item.departmentId"> </el-option> </el-select> departmentTree有值时自动选中
时间: 2024-03-21 14:38:00 浏览: 47
您可以在 `mounted()` 钩子函数中使用 `this.$nextTick()` 方法来等待 Vue 实例渲染完成后再设置 `departmentTree` 的值,从而自动选中 `el-select` 组件中对应的选项。
以下是示例代码:
```javascript
mounted() {
this.$nextTick(() => {
if (this.ujbForm.departmentTree && this.ujbForm.departmentTree.length > 0) {
this.$refs.departmentTree.$refs.multiple.setCheckedNodes(this.departmentTreeData.filter(item => this.ujbForm.departmentTree.includes(item.departmentId)));
}
})
}
```
在上面的代码中,我们首先判断 `departmentTree` 是否有值,如果有值,则使用 `$refs` 获取 `el-select` 组件的实例,并调用其 `setCheckedNodes()` 方法来设置选中的节点。在 `setCheckedNodes()` 方法中,我们使用 `filter()` 方法来过滤出与 `departmentTree` 数组中的 id 相匹配的节点,然后将过滤出来的节点作为参数传入方法中即可。
需要注意的是,上述代码中的 `this.$refs.departmentTree` 应该与 `el-select` 组件的 `ref` 属性值相同。例如,如果您的 `el-select` 组件的 `ref` 属性值为 "departmentTree",则上述代码中的 `this.$refs.departmentTree` 应该改为 `this.$refs.departmentTree.$refs.multiple`。
阅读全文