Vue

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": [
                    ...