el-cascader 使用

注意：此处不在form表单中使用

<template>
  <div class="block">
    <!--    <el-cascader ref="cascader" :props="{ expandTrigger: 'hover',multiple: true,checkStrictly:true }"
                     placeholder="试试搜索：XX"
                     :options="pdfTree" clearable>
          <template slot-scope="{ node, data }">
            <span style="display:block" @click="handleNodeClick(node)">{{ data.label }}</span>
          </template>
        </el-cascader>-->
    <el-cascader
        style="width: 100%"
        placeholder="试试搜索：文件"
        ref="cascader"
        :props="{ value:'id' }"
        :options="pdfTree" clearable filterable>
      <template slot-scope="{ node, data }">
        <span @click="handleNodeClick(node,data)">{{ data.label }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>
<script>
export default {
  name: "fileCascader",
  props: {
    //业务外键Id
    refId: {type: String},
    refType: {default: 'default'},
    groupCode: {default: 'default'},
    keyword: {type: String},
    //预览是否带水印
    watermark: {default: true}
  },
  data() {
    return {
      pdfTree: [],
      current: {},
      fileId: '',
      //
    }
  },
  watch: {
    refId() {
      this.loadData()
    }
  },
  methods: {
    $init() {
      this.loadData();
    },
    deletePdf(row) {
      this.$confirm('此操作将进行删除信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('files/delete/' + row.id)
            .then(({data}) => {
              if (data.success) {
                this.loadData()
                this.$message.success("删除成功")
              }
            })
      })
    },
    fileToPdf(row) {
      this.loading = true
      this.$http.post('ofd/fileToOfd/', {fileId: row.id})
          .then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.data)
              this.loadData()
            }
            this.loading = false
          })
    },
    async getNullChildren(v) {
      if (v.children == null) {
        await this.handleNodeClick(v)
      } else {
        await this.getNullChildren(v.children[0])
      }
    },
    async loadData() {
      this.loading = true
      const {data} = await this.$http.post('fileView/fileTree', {
        refId: this.refId,
        refType: this.refType,
        groupCode: this.groupCode
      })
      this.loading = false
      if (data.success) {
        this.loading = false
        if (data && data.success) {
          this.pdfTree = data.data
          if (this.pdfTree.length > 0) {
            this.fileId = this.pdfTree[0].id
            // this.setCurrentKey(this.pdfTree[0])
            this.current = this.pdfTree[0]
            await this.getNullChildren(this.pdfTree[0])
          }
          this.$forceUpdate()
        }
      }
      this.loading = false
    },
    async handleNodeClick(node, data) {
      if(data){
        console.log('node=', node, ';data=', data)
        this.current = data
        this.fileId = this.current.id
        // this.setCurrentKey(v)
        //子节点 点击获取文件
        if (this.current.children == null) {
          this.$emit("showFile", this.current)
        } else {
          //文件夹
        }
      }
    },
    // setCurrentKey(v) {
    //   this.$nextTick(() => {
    //     this.$refs.tree.setCurrentKey(v.id)
    //   })
    // }
  }
}
</script>
<style lang="scss">
.file_tree {
  .el-tree-node__content {
    padding: 4px;
  }

  .el-tree-node__content:hover {
    background-color: #eee;
  }

  .is-current {
    .el-tree-node__content {
      color: $--color-white;
      background-color: $--color-primary-dark-1;
      font-weight: bold;
    }
  }
}
</style>