<template #default="{ node,data }">

标签： 自定义 插槽 组件 data 节点 属性

<template>
    <el-dialog
            v-model="dialogVisible" :title="title" :width="width" :close-on-click-modal="false"
            :close-on-press-escape="false" @close="dialogClose" @open="dialogOpen">
        <BasicForm
                ref="basisFormRef" label-width="100px"
                :item="form_config.form_item"
                :button="form_config.form_button"
                :field="form_config.form_data"
                :loading="form_config.form_loading"
                @callback="handlerSubmit"
        >
            <template v-slot:permit>
                <el-tree
                        :data="datas.tree_data"
                        show-checkbox
                        node-key="menu_id"
                        default-expand-all
                        :expand-on-click-node="false"
                >
                    <template #default="{ node,data }">    <!--此处的data应该是el-tree中的:data-->
                        <div>
                            <div><strong>{{ data.menu_name }}</strong></div>
                        </div>
                    </template>
                </el-tree>
            </template>
        </BasicForm>
    </el-dialog>
</template>

<template #default="{ node,data }"> 是 Vue.js 中的一个作用域插槽的用法。它允许你自定义组件的内容，通过传入你自己的模板。在这个例子中，它被用来自定义 el-tree 组件中每个节点的内容。

#default 是插槽的名称。如果没有提供名称，那么它就被认为是默认插槽。

"{ node,data }" 是一个解构赋值，用来从插槽的作用域中提取 node 和 data 属性。这些属性由 el-tree 组件提供，代表当前的树节点和其关联的数据。

在这个插槽内部，你可以使用这些属性来显示每个树节点的自定义内容。在你的代码中，你正在显示 data 对象的 menu_name 属性。

标签：,自定义,插槽,组件,data,节点,属性
From： https://www.cnblogs.com/vPYer/p/18004999