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