• 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>
    

      

  • 相关阅读:
    8小时外你做什么?下班后的生活决定你的竞争力
    8个月,一位年轻总裁的坠落:值得所有职业经理人深思
    陈紫熹(帮别人名字作诗)
    年轻人创业尤其要注意的五个基本法则
    解密联想20年的45条法则
    小本创业】30条生意妙经及七大关键感悟
    新时代白领必备的两大“新”能力,你有吗?
    秘笈:送给创业者的19条忠告
    C#计算两个日期之间的差
    tnsnames.ora是什么东东?
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/8530337.html
Copyright © 2020-2023  润新知