Loading

element下拉树

<el-form-item label="任务:">
        <el-popover ref="taskListPopover" placement="bottom-start" trigger="hover">
          <el-input placeholder="输入关键字进行过滤" size="small" clearable v-model="taskfilterText"></el-input>
          <el-tree
            class="task"
            style="max-height: 27vh;overflow: auto;margin-top: 10px;"
            show-checkbox
            :data="taskTreeList"
            :props="taskListTreeProps"
            :node-key="taskNodeKey"
            ref="taskListTree"
            :check-strictly="false"
            @check-change="taskListTreeCurrentChangeHandle"
            :highlight-current="true"
            :expand-on-click-node="false"
            :default-expand-all="false"
            :check-on-click-node="false"
            :filter-node-method="taskfilterNode"
          ></el-tree>
        </el-popover>
        <el-input v-model="taskListStr" :title="taskListStr" v-popover:taskListPopover :readonly="true" placeholder="请选择">
          <i v-show="taskListStr" class="el-input__icon el-icon-circle-close el-input__clear" slot="suffix" @click.stop="clearTaskTreeData"></i>
        </el-input>
      </el-form-item>
data () {
    return {
      taskfilterText: ''//树形下拉框====,  
      taskTreeList: [],
      taskListTreeProps: {
        label: 'label',
        children: 'children',
      },     
      taskNodeKey: 'value',     
      taskListStr: '',    
    }
  },
 watch: {
    taskfilterText (val) {
      this.$refs.taskListTree.filter(val)
    }
  },
    // 获取下拉列表
    getTaskList () {
      api.getTaskTree({}).then((data) => {
      })
    },
  //下拉树处理
    taskfilterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },    
  //清空查询条件
    clearTaskTreeData () {
      this.$refs.taskListTree.setCheckedKeys([])
      this.taskListStr = ''
    },
  // 树选中
    taskListTreeCurrentChangeHandle () {
      this.taskListStr = this.$refs.taskListTree
        .getCheckedNodes()
        .map((p) => {
          return p.label
        })
        .join(',')
      this.dataForm.subTaskId = this.$refs.taskListTree.getCheckedKeys().join(',')
    },
//一级不显示复选框
.task
  >>> .el-tree-node
  > .el-tree-node__content
  > .el-checkbox
  .el-checkbox__inner {
  display: none;
}

.task
  >>> .el-tree-node
  .el-tree-node__children
  .el-checkbox
  .el-checkbox__inner {
  display: inline-block !important;
}
posted @ 2022-03-03 10:41  资深if-else侠  阅读(474)  评论(0编辑  收藏  举报