<treeselect style="width: 200px" placeholder="选择学校" :normalizer="schoolNormalizer" v-model="schoolValue" @select="selectChange" :beforeClearAll="clearChange" :disabled = "disabled" :options="schoolList" :defaultExpandLevel="Infinity" > </treeselect> data() { return { // 学校列表 schoolList: [], // 学校第一个值 firstValue: '', // 默认值 defaultValue: null, } }, model: { prop: 'value', event: 'change' }, props: { // 是否禁止选择 disabled: Boolean, // 组件默认值 value: { default: null, type: Number }, // 是否显示第一个 isFirst: { default: false, type: Boolean }, }, 怎么默认显示第一个值
时间: 2024-02-14 11:15:27 浏览: 65
ngx-tree-select:带有树项的角度选择组件
如果想要默认显示第一个值,可以通过设置 `defaultValue` 属性来实现。在 `data` 函数中添加 `defaultValue` 属性,并将其设置为学校列表中的第一个值。然后,在 `treeselect` 组件中绑定 `defaultValue` 属性即可。具体代码如下:
```
<treeselect
style="width: 200px"
placeholder="选择学校"
:normalizer="schoolNormalizer"
v-model="schoolValue"
@select="selectChange"
:beforeClearAll="clearChange"
:disabled="disabled"
:options="schoolList"
:defaultExpandLevel="Infinity"
:defaultValue="firstValue"
>
</treeselect>
data() {
return {
// 学校列表
schoolList: [],
// 学校第一个值
firstValue: '',
// 默认值
defaultValue: null,
}
},
mounted() {
// 设置默认值为学校列表中的第一个值
this.defaultValue = this.schoolList.length > 0 ? this.schoolList[0].id : null;
},
props: {
// 是否禁止选择
disabled: Boolean,
// 组件默认值
value: {
default: null,
type: Number
},
// 是否显示第一个
isFirst: {
default: false,
type: Boolean
},
},
```
需要注意的是,如果 `isFirst` 属性为 `true`,则需要将 `defaultValue` 设置为 `firstValue` 的值。
阅读全文