关于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 | 标题 | String | false | [“源列表”, “目标列表”] | ||
from_data | 源数据 | Array | true | 数据格式同element-ui tree组件,但必须有id和pid | ||
to_data | 目标数据 | Array | true | 同上 | ||
defaultProps | 同el-tree中props | Object | false | label: “label”, children: “children”, isLeaf: “leaf”, disable: “disable” | ||
node_key | 默认为id | String | false | id | 必须与treedata数据内的id参数名一致,必须唯一 | |
pid | 默认为"pid" | String | false | pid |
参考文章:
[1] 一个基于vue和element-ui的树形穿梭框组件
以上是关于关于element-ui的tree树形组件的bug的主要内容,如果未能解决你的问题,请参考以下文章
element-ui使用select组件和tree组件实现下拉树形选择器
Element-ui中 树形控件(Tree)实现只显示某一层级复选框且单选
vue-table-with-tree-grid的树形表格组件如何使用
Element-ui中tree树形控件全选与取消全选的功能实现