<template>
  <div>
      <el-dialog
          title="请选择"
          :visible.sync="visible"
          width="30%"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
          :before-close="close"
          >
          <div class="tree">
            <el-row>
                <deptTreeOnly @treeCheck="treeCheck"></deptTreeOnly>
            </el-row>
          </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="checkSelectUser">确 定</el-button>
      </span>
  </el-dialog>
</div>
</template>
<script>
import deptTreeOnly from "@/components/deptTreeOnly.vue"
export default {
  props: {
    visible: { type: Boolean, required: true, default () { return false } },
  },
  components: {deptTreeOnly},
  data(){
    return{
        treeList:[]
    }
  },
  methods:{
      treeCheck(v) {
        this.treeList = v;
      },
      checkSelectUser(){
        this.$emit('handleSelect',this.treeList)
        this.close()
      },
      close(){
        this.$emit('update:visible', false) // 直接修改父组件的属性
        this.$emit('close')

      }
  }
}
</script>
<style scoped lang="scss">
.tree{
  height: 350px;
  overflow:scroll;
}
</style>
