小bug,在同一个页面中:
表单中可以正常显示:
<el-form-item label="机构:">
<TreeSelect
style="width: 220px"
v-model="queryParams.mofId"
:options="orgOptions"
:flat="true"
:disable-branch-nodes="true"
no-options-text="暂无可用选项"
:normalizer="deptnormalizer"
placeholder="请选择"
@select="node => orgHandleSelect(node)"
>
<div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}</div>
<div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}
</div>
</TreeSelect>
</el-form-item>
基本上就是一样的代码,但是在列表中就不显示
<el-table-column label="机构" align="center" prop="mofDivName">
<template slot-scope="scope">
<TreeSelect
v-model="scope.row.mofId"
:options="orgOptions"
:flat="true"
:disable-branch-nodes="true"
no-options-text="暂无可用选项"
:normalizer="deptnormalizer"
placeholder="请选择"
@select="node => orgHandleSelect(node)"
>
<div slot="value-label" slot-scope="{ node }">
{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}</div>
<div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.code ? node.raw.label : '' }}
</div>
</TreeSelect>
</template>
</el-table-column>
解决:
加这个 :append-to-body="true"就可以了,应该是样式影响的原因,组件添加 :append-to-body=“true” 属性时,这个属性会让组件的挂载点变为文档的 元素,而不是它所在的父级元素,可以避免被遮挡,脱离原始的文档流