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

      

  • 相关阅读:
    LINUX操作系统VIM的安装和配置
    Ubuntu 14.04 LTS中怎样安装fcitx中文输入法
    Ubuntu 速配指南:开启3D桌面特效
    在U盘上安装Windows 7的详细步骤
    设置ip地址、掩码、网关、DNS
    U盘安装电脑系统教程
    取消word中所有超链接
    dos命令批处理发送文字到剪贴板
    Word2007:如何在竖版(纵向)页面中间插入横版(横向)页面
    ubuntu12.04 alternate win7 双系统安装
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/8530337.html
Copyright © 2020-2023  润新知