dialog 和 tree树的一个功能小组件
我们先来看一下样式
这里我们对dialog进行一个封装 ,tree树也进行了封装。我们这次采用的懒加载方式。
tree树遇到的最大的问题loadNode只加载一次。所以我们点击查询的时候想重置操作
我查了下文档没有怎么样重置loadNode的方法,然后经过大佬解答我们需要用node.loaded = false; node.expand();重置这层树。
下边为了方便将代码送给大家
对dealog的封装
<template>
<el-dialog
custom-class="w-modal-wrp"
:width="width"
:top="top"
:title="title"
:center="true"
:show-close="showClose"
:append-to-body="appendToBody"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="dialogVisible"
:before-close="beforeClose"
@closed="onClosed"
>
<div v-loading="loading">
<div class="w-modal_content">
<slot />
</div>
</div>
<template slot="footer">
<el-button
v-if="cancelButton"
size="small"
:disabled="loading"
@click="doCancel()"
>
{
{
cancelText }}
</el-button>
<el-button
v-if="submitButton"
size="small"
:disabled="loading"
@click="doSubmit()"
>
{
{
submitText }}
</el-button>
</template>
</el-dialog>
</template>
<script>
import {
Button, Dialog } from 'element-ui';
export default {
name: 'w-modal',
components: {
[Button.name]: Button,
[Dialog.name]: Dialog,
},
props: {
loading: Boolean,
width: {
type: String,
default: '480px',
},
top: {
type: String,
default: '30px',
},
center: {
type: Boolean,
default: false,
},
showClose: {
type: Boolean,
default: false,
},
appendToBody: {
type: Boolean,
default: true,
},
cancelButton: {
type: Boolean,
default: true,
},
cancelText: {
type