JSFiddle - React, Tailwind, and code Playground
by superchangme
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click='addOneTree' >添加树</el-button><span>树的数量:{{treeArr.length}}</span><el-button @click='delOneTree' >删除树</el-button>
<div style="clear:both;white-space: nowrap">
<el-tree ref="bcObjectTree" v-for='a in treeArr' style='display: inline-block;' :data="options" :props='nodeProps'
:show-checkbox="true"
:default-checked-keys="defaultCheckedKeys"
:expand-on-click-node="expandOnClickNode"
:default-expand-all="defaultExpandAll"
:default-expanded-keys="defaultExpandedKeys"
:default-collapsed-keys="defaultCollapsedKeys"
emptyText="">
</el-tree>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var treeData = [
{
"children": [
{
"children": [
{
"relationType": 2,
"antiForgetting": 0,
"isOilTankDev": null,
"canCapture": 0,
"isOnline": 0,
"objectType": "Vehicle",
"energyType": 1,
"powerIdFirst": "0",
"leaveBehind": 0,
"createTime": "20190318155051",
"objectName": "京81549",
"faultState": 0,
"is3gOnline": 0,
}
],
"objectName": "0123456789012345678901234567890123456789012",
"objectType": "Org",
"templCount": 1
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [
...