vuecli+elementui，tree的数据的刷新的问题

当我点击左侧的时候，可以根据 @node-click得到当前节点下面的数据并渲染到列表上；但是当在右侧进行增加、删除和修改等操作的时候，可以调用左侧tree函数进行刷新，但是列表却无法刷新，无法再次调用@node-click方法，请问这个时候该怎么去解决，两侧数据实时同步的问题？！！current-change试过了也得不到值！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不管新增、编辑、删除操作的都是data3这个数组，做好同步就没问题。点击左边就是根据id查询子级的操作显示到右边表格。右边数据修改同步更新到data3就可以。
data3是tree的所有数据，页面上列表的数据也有另外一个数组。主要是在页面数据更新的时候不知道怎么调用点击左侧渲染当前子节点的数据这个方法
数据列表这个组件的数据，可以watch到数据的增加减少，但是就是不能刷新
其实可以用同一个数组，两个数组肯定同步不了。点击左边能获取当前节点的id,通过这个id去获取子节点的数据渲染到右边的表格。用两个数组就需要修改右边数组后替换数组data3选中节点的children，达到同步的效果
这里是通过@node-click得到点击当前节点的数据的，如果只引用一个数组怎么才能得到当前选中的部分内容呢
这是data3 的数据的第一条，每条下面有一个children
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
  @import url("https://unpkg.com/[email protected]/lib/theme-chalk/index.css");
</style>
<body>
  <div id="app">
    <el-tree show-checkbox :check-on-click-node="true" :data="data3" node-key="id" :props="defaultProps"
      default-expand-all @node-click="getNodeChildren" ref="tree">
    </el-tree>
    <el-table :data="childNode" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="label" label="文本" width="180">
      </el-table-column>
      <el-table-column prop="label" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editNode(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
      <el-input v-model="currentNode.id" placeholder="请输入内容"></el-input>
      <el-input v-model="currentNode.label" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        getNodeChildren(node) {
          let cnode = []
          this.childNode = this.$refs.tree.getCheckedNodes()
        },
        editNode(item) {
          this.currentNode = item          this.dialogVisible = true
        },
        loopNode(node) {
          node.forEch(item => {
            this.childNode.push(item)
            if (item.children && item.children.length > 0) {
              this.loopNode(item.children)
            }
            return
          })
        }
      },
      data() {
        return {
          currentNode: {
            id: '',
            label: ''
          },
          dialogVisible: false,
          childNode: [],
          data3: [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2'
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        };
      }
    })
  </script>
</body>自己看看
loopNode函数可以删除
还是不太懂啊哥哥，这样我解释下详细的情况：
首先我这里是后台给的一个平级数据的接口，用js文件分解成一个数组，然后拿这个数组去渲染tree。
现在是点击tree得到一个父id，然后根据id去查找属于这个父id去查找当前下面的子元素列表，进行列表的渲染。
现在的情况是，对数据列表进行增删改之后tree的数据变了，但是列表数据没有变，还需要点击一下才能渲染到。这个点击函数handNodeClick不能在操作之后进行触发，具体的值不能实时更新，懵逼到这了。。
思路，左侧目录树和右侧表格看成两个组件，目录树点击的时候取目录树节点id 保存  然后调用右侧表格刷新的方法（请求后台数据）；右侧表格定义一个刷新的方法，请求时就去取点击的时候保存的节点id 然后像后端请求数据；新增编辑或者删除后再次调用这个刷新的方法就可以了
你这个调用左侧tree函数，指的是点击左侧的筛选框吗？我也遇到了这种数据与表格不同步的情况，现在已经解决，如果你这个是点击左侧筛选框的话.就可以刷新的话，
我是通过一个方法去改变左侧的筛选框的筛选状态，修改一次的时候，视图刷新了，但是左侧不多，然后修改两次就好了
现在在外边看不了具体方法
有一个方法是toggleRowSelection    调用方法是this.$refs.table.toggleRowSelection(row)    这个方法会切换左侧筛选框的值，切换一次是不对的，切换两次即可，row参数可在你点击的按钮里，通过传参的方式得到
有一个方法是toggleRowSelection    调用方法是this.$refs.table.toggleRowSelection(row)    这个方法会切换左侧筛选框的值，切换一次是不对的，切换两次即可，row参数可在你点击的按钮里，通过传参的方式得到好的谢谢大佬，周一研究下
有一个方法是toggleRowSelection    调用方法是this.$refs.table.toggleRowSelection(row)    这个方法会切换左侧筛选框的值，切换一次是不对的，切换两次即可，row参数可在你点击的按钮里，通过传参的方式得到这个我不太懂，怎么去写。。
<template>
  <div>
    <el-table
      ref="tableData"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
      />
      <el-table-column
        prop="name"
        label="姓名"
        sortable
        width="180"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleDelete(index, row) {
      this.$refs.tableData.toggleRowSelection(row) // 此方法进行调用两次
    }
  }
}
</script>你看一下吧  简单写了一下
感谢各位大佬不辞辛苦的解答，我在测试过N次之后，并使用watch测试了N次之后！找到了解决方法：就是在watch中实时侦测整个tree的数据，实时赋值即可