vue-treeselect修改样式，高度，宽度

最新推荐文章于 2024-11-28 14:50:39 发布

原创最新推荐文章于 2024-11-28 14:50:39 发布 · 1.1w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #css3 #html

收录于

这篇博客介绍了Vue中的Treeselect组件的使用，包括样式定制和在表单中的应用。示例代码展示了如何设置宽度、行高，并在`el-form-item`中嵌入 Treeselect，实现选择医院ID的功能，支持清空选择。

/* Treeselect */
.treeselect-main {
	width: 204px;
	line-height: 30px;
	.vue-treeselect__placeholder {
		line-height: 30px;
	}
	.vue-treeselect__control {
		height: 30px;
	}
}

<el-form-item label="单选" prop="hospitalId">
        <treeselect v-model="query.hospitalId" class="treeselect-main" :options="selectHospitals"
          clearable placeholder="请选择"  />
</el-form-item>