在vue table中使用treeselect 下拉内容不显示问题

月下脆竹書閣

已于 2022-11-24 16:47:37 修改

阅读量3.4k

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2022-11-23 19:42:04 首次发布

本文链接：https://blog.csdn.net/c_x_m/article/details/128006123

版权

VUE 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

"在Vue应用中，当Treeselect组件被用在表格（Table）内部时可能出现显示异常。通过设置`appendToBody="true"`和`z-index="9999"`属性，可以确保Treeselect在表格中正常显示。同时，注意初始化v-model值应为null，避免出现`TypeError`。此外，提供了Treeselect组件的安装、注册和使用步骤，以及数据格式示例。"

摘要由CSDN通过智能技术生成

样式呈现：
在这里插入图片描述

问题描述：

当我使用treeselect 在table外层时，他是可以显示成功的，但当在table内部时，就显示不成功了

解决方案：

添加两个属性 :appendToBody="true" z-index="9999" 就可以了【我使用的是iview组件，elementui 好像是append-to-body 大家可以试一下】

<!--BRANCH_PRIORITY-如果选中了分支节点，则其所有后代将被排除在value 数组之外-->
<treeselect 
	v-model="tableData[index].content" 
	:appendToBody="true"
	z-index="9999" 
	:options="options"
	:showCount="true"
	:multiple="true"
	value-consists-of="BRANCH_PRIORITY"
	:placeholder="$t('pleaseSelect') + $t('roleName')"
	style="height: 100%" />

treeselect介绍及使用官网地址

1.安装
npm install --save @riophae/vue-treeselect
2.全局main.js引入

import the component
import Treeselect from '@riophae/vue-treeselect'
import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
注册树型下拉组件
Vue.component("treeselect", Treeselect);

3.使用

如解决方案所贴代码

4.数据格式

 options: [ {
     id: 'company',
     label: 'Company 🏢',
     children: [{
       id: 'team-i',
       label: 'Team I 👥',
       children: [ {
         id: 'person-a',
         label: 'Person A 👱',
       }, {
         id: 'person-b',
         label: 'Person B 🧔',
       } ],
     }, {
       id: 'team-ii',
       label: 'Team II 👥',
       children: [ {
         id: 'person-c',
         label: 'Person C 👳',
       }, {
         id: 'person-d',
         label: 'Person D 👧',
       } ],
     }, {
       id: 'person-e',
       label: 'Person E 👩',
     } ],
   } ]