人人设计网主页_沈阳网红_业务多平台怎么样_台州网络推广

详细示例可在 vue-treeselect官网 查看

修改vue-treeSelect 组件的高度

方法1：CSS中的important语法，覆盖样式

.treeselect-main {width: 204px;line-height: 28px;.vue-treeselect__placeholder {line-height: 28px;}.vue-treeselect__control {height: 28px !important;}
}

对应的 vue-treeselect 组件添加 class="treeselect-main"

	<Treeselectclass="treeselect-main"v-model="listQuery.treeOption":options="treeSelectOptions":show-count="true":append-to-body="true"z-index="9000"placeholder="请选择"/>

方法2：修改组件样式文件，重新引入样式文件

第一步：根据引入的样式文件路径，找到样式文件，复制到项目合适的样式文件夹、
第二步：根据需求修改Vue-treeselect的样式（高度）
第三步：引入修改后的样式文件

修改单选的回显，显示当前选中节点以及相应父级节点

第一步 下载源码

源码下载：GitHub

第二步 修改源码

找到源码中的 SingleValue.vue 组件，修改源码如下(修改 renderSingleValueLabel 的 return 结果)：

<script>import Input from './Input'import Placeholder from './Placeholder'export default {name: 'vue-treeselect--single-value',inject: [ 'instance' ],methods: {renderSingleValueLabel() {const { instance } = thisconst node = instance.selectedNodes[0]const customValueLabelRenderer = instance.$scopedSlots['value-label']return customValueLabelRenderer? customValueLabelRenderer({ node }): node.nestedSearchLabel // todo 原值 node.label},},render() {const { instance, $parent: { renderValueContainer } } = thisconst shouldShowValue = instance.hasValue && !instance.trigger.searchQueryreturn renderValueContainer([shouldShowValue && (<div class="vue-treeselect__single-value">{ this.renderSingleValueLabel() }</div>),<Placeholder />,<Input ref="input" />,])},}
</script>

第三步 编译源码

在源码根目录下执行 npm run build-library 命令，会打包编译源码，编译完成后，在源码根目录下生成一个dist目录，dist目录下就是编译的结果。

第四步 将编译结果引入项目中，替换npm导入的 vue-treeselect

此处以 vue-element-admin 项目为例，引入测试。将第三步编译好的 dist目录下的 js、css 等文件作为自定义组件引入项目中。

在 complex-table.vue 组件中引入测试

准备的测试数据 treeSelectOptions 如下：

	[{id: '1',label: 'a-1',children: [{id: '11',label: 'a-11'},{id: '12',label: 'a-12'},{id: '13',label: 'a-13'}]},{id: '2',label: 'a-2',children: [{id: '21',label: 'a-21',children: [{id: '211',label: 'a-211'}]},{id: '22',label: 'a-22'},{id: '23',label: 'a-23'}]}]

引用组件如下：

回见结果如下：


另外，vue-treeselect 回显修改后重新编译的结果在这里，可以下载后直接引入项目使用。