vue-treeselect箭头和叉图标变大
最近在项目开发过程中使用vue的treeselect组件遇到了图标变大的问题，附图：
其他页面也有应用到这个组件但没有出现这种情况，在我从正常页面跳转到这个页面的时候，不会出现问题，几个页面的样式代码并没有区别。
后经排查发现问题是因为没有引入treeselect的样式导致的，没有异常的页面是因为页面引入的子组件引入了treeselect样式。
解决方法
在使用到treeselect样式的页面中引入样式：import ‘@riophae/vue-treeselect/dist/vue-treeselect.css’
解决后的样子
插件vue-treeselect用法
效果图：
首先需要安装
npm install --save @riophae/vue-treeselect
用法看代码注释
<template>
<el-form ref="form"
:model="searchForm"
label-width="100px"
:inline="true"
:size="$formSize">
<el-form-item label="区域：">
<!--使用此插件过程中发现了一个新的问题，可能会因为层级样式问题在element组件中无法展示选项-->
<!--修改方法就是将append-to-body的绑定值改为false-->
<treeselect :append-to-body="true"
v-model="searchForm.areaId"
:options="areaAllList"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择所属区域" />
</el-form-item>
</el-form>
</template><script>
//引入插件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
//使用组件
components: { Treeselect },
data () {
return {
areaAllList: [],
searchForm: {
areaId: null,//绑定值必须为null,否则输入框中会提示unkonwn
},
}
},
mounted () {
this.getAreaAll()
},
methods: {
//转换菜单数据结构
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.areaId,
label: node.areaName,
children: node.children,
};
},
//调用接口获取select选项数据
getAreaAll () {
request({
url: `/manager/Area/AllAreaTree`,
method: "get",
}).then((res) => {
if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
this.areaAllList = res.data;
} else {
this.$message({
type: "error",
message: res.message || "操作失败",
});
}
});
},
}
}
</script><style lang="scss" scoped>
::v-deep .vue-treeselect__control {
max-width: 215px;
}
</style>以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。