elememt 返回选中数据，选中项，设置问题 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>

    <div id="app">
      <el-tree :data="data2" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
      </el-tree>

      <div class="buttons">
        <el-button @click="getCheckedNodes">通过 node 获取</el-button>
        <el-button @click="getCheckedKeys">通过 key 获取</el-button>
        <el-button @click="setCheckedNodes">通过 node 设置</el-button>
        <el-button @click="setCheckedKeys">通过 key 设置</el-button>
        <el-button @click="resetChecked">清空</el-button>
      </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        methods: {
          getCheckedNodes() {
            /*返回的是选中的数据组成的数组*/
            console.log(this.$refs.tree.getCheckedNodes());
          },
          getCheckedKeys() {
            /*返回选中的id组成的数组*/
            console.log(this.$refs.tree.getCheckedKeys());
          },
          /*通过getCheckedNodes()设置选中项*/
          setCheckedNodes() {
            this.$refs.tree.setCheckedNodes([{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 9,
              label: '三级 1-1-1'
            }]);
          },
          /*通过setCheckedKeys()设置选中项*/
          setCheckedKeys() {
            this.$refs.tree.setCheckedKeys([3]);
          },
          resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
          }
        },

        data() {
          return {
            data2: [{
              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>

</html>

　　

posted @ 2018-03-08 19:14  LWJ_jay  阅读(3396)  评论(0)    收藏  举报