Tue Mar 26 22:34:00 CST 2024 inscode

src/views/Home/index.vue

 <template>
     <div>
-        主页
+        <el-tree :data="data" :default-checked-keys="selectedKeys" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
+            :props="defaultProps">
+        </el-tree>
+        <div class="buttons">
+            <el-button @click="getCheckedKeys">提交</el-button>
+        </div>
+        <div>
+            <h3>勾选的值：</h3>
+            <p>{{ selectedKeys.join(',') }}</p>
+        </div>
     </div>
 </template>
 <script>
-    export default{
-        name:'home',
-        data(){
-            return {
-
-            }
-        },
-
-        mounted(){
-
+export default {
+    methods: {
+        getCheckedKeys() {
+            const keys = this.$refs.tree.getCheckedKeys(true)
+            this.selectedKeys=keys
+            console.log(keys);
         },
-
-        methods:{
-
-        },
-
+    },
+    data() {
+        return {
+            selectedKeys:[9],
+            data: [{
+                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>
-<style lang="less" scoped>
-
+};
+</script>
\ No newline at end of file
-</style>
\ No newline at end of file