关于element-ui的tree树形组件的bug

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于element-ui的tree树形组件的bug相关的知识,希望对你有一定的参考价值。

参考技术A 当tree是可选择的时候,也就是说为“show-checkbox”属性时,这个组件默认是点击复选框实现选中状态,但是如果是想点击节点实现复选框的选中则可以设置:

实现需求:如果页面中得到的是“text”,字符串的true,但我们想要传布尔类型的true时候:

Element-UI 树形穿梭组件

Element-UI 树形穿梭组件

一、基本使用

npm install el-tree-transfer --save
<template>
    <div>
    // 使用树形穿梭框组件
    <tree-transfer :title="title"
     :from_data='fromData'
     :to_data='toData'
     :defaultProps="label:'label'"
     :mode='mode'
      height='540px'
      filter
      openAll>
    </tree-transfer>
  </div>
</template>  

<script>
import treeTransfer from 'el-tree-transfer' // 引入

export defult 
    components: 
	    treeTransfer 
     // 注册
    data()
      return:
        mode: "transfer", // transfer addressList
        fromData:[
          
            id: "1",
            pid: 0,
            label: "一级 1",
            children: [
              
                id: "1-1",
                pid: "1",
                label: "二级 1-1",
                children: []
              ,
              
                id: "1-2",
                pid: "1",
                label: "二级 1-2",
                children: [
                  
                    id: "1-2-1",
                    pid: "1-2",
                    children: [],
                    label: "二级 1-2-1"
                  ,
                  
                    id: "1-2-2",
                    pid: "1-2",
                    children: [],
                    label: "二级 1-2-2"
                  
                ]
              
            ]
          ,
        ],
        toData:[]
      
    ,
    methods:
     //
    ,
  
</script>

二、参数设置

参数说明类型必填可选值默认值补充
title标题Stringfalse[“源列表”, “目标列表”]
from_data源数据Arraytrue数据格式同element-ui tree组件,但必须有id和pid
to_data目标数据Arraytrue同上
defaultProps同el-tree中propsObjectfalse label: “label”, children: “children”, isLeaf: “leaf”, disable: “disable”
node_key默认为idStringfalseid必须与treedata数据内的id参数名一致,必须唯一
pid默认为"pid"Stringfalsepid

参考文章:
[1] 一个基于vue和element-ui的树形穿梭框组件

以上是关于关于element-ui的tree树形组件的bug的主要内容,如果未能解决你的问题,请参考以下文章

element-ui使用select组件和tree组件实现下拉树形选择器

Element-ui中 树形控件(Tree)实现只显示某一层级复选框且单选

vue-table-with-tree-grid的树形表格组件如何使用

Element-ui中tree树形控件全选与取消全选的功能实现

使用vue-table-with-tree-grid的树形表格组件

使用vue-table-with-tree-grid的树形表格组件