返回

Element-UI Tree树形控件默认选中

前端

<html>
    <head>
        
    </head>
    <body>
        <h1>Element-UI Tree树形控件默认选中</h1>

        <h2>1. 方式一: :default-checked-keys</h2>

        <p>可以通过设置default-checked-keys属性来实现默认选中。该属性接受一个数组，其中包含要默认选中的节点的key值。</p>

        <pre>
        <template>
            <el-tree :default-checked-keys="['1-1-1']">
                <el-tree-node label="1" key="1">
                    <el-tree-node label="1-1" key="1-1">
                        <el-tree-node label="1-1-1" key="1-1-1"></el-tree-node>
                    </el-tree-node>
                </el-tree-node>
            </el-tree>
        </template>
        </pre>

        <h2>2. 方式二: this.$refs.tree自定义ref名.setCheckedKeys</h2>

        <p>可以通过this.$refs.tree自定义ref名.setCheckedKeys方法来实现默认选中。该方法接受一个数组，其中包含要默认选中的节点的key值。</p>

        <pre>
        <template>
            <el-tree ref="tree">
                <el-tree-node label="1" key="1">
                    <el-tree-node label="1-1" key="1-1">
                        <el-tree-node label="1-1-1" key="1-1-1"></el-tree-node>
                    </el-tree-node>
                </el-tree-node>
            </el-tree>
        </template>
        <script>
        export default {
            mounted() {
                this.$refs.tree.setCheckedKeys(['1-1-1'])
            }
        }
        </script>
        </pre>

        <h2>总结</h2>

        <p>Element-UI Tree树形控件可以通过两种方式实现默认选中：通过设置default-checked-keys属性或通过this.$refs.tree自定义ref名.setCheckedKeys方法。</p>

    </body>
</html>