最近需求: 弹框里面放一个下拉框,下拉框内容是一个树状结构

 <el-dialog :visible="visible" :title="title" @open="open" @close="onClose">
 	 <el-form ref="form" :model="form" :rules="rules" label-width="75px">
 	 	<el-form-item label="分类" prop="categoryId">
        <el-select
          ref="selectTree"
          v-model="form.categoryId"
          placeholder="请选择分类"
          filterable
          remote
          popper-class="category"
          :remote-method="remoteMethod"
          @visible-change="changeVisible"
        >
          <el-tree
            ref="tree"
            v-loading="isLoadingTree"
            node-key="id"
            default-expand-all
            highlight-current
            :data="treeData"
            :props="extend.defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          />
          <el-option :key="form.categoryId" :value="form.categoryId" :label="categoryName" />
        </el-select>
      </el-form-item>
private remoteMethod(val) {
    this.treeRef.filter(val)
  }
  private filterNode(value, data) {
    if (!value) return true
    return data.categoryName.indexOf(value) !== -1
  }
  private changeVisible(visible) {
    if (visible) {
      this.treeRef.setCurrentKey(this.form.categoryId)
    } else {
      this.treeRef.filter('')
    }
  }
  // 点击tree
  handleNodeClick(data) {
    this.form.categoryId = data.id
    this.categoryName = data.categoryName
    this.selectTreeRef.blur()
  }

重点:@visible-change下拉框出现/隐藏时触发
或者用el-input和el-tree代替

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐