easyUl tree 做 select 下拉多选

锅里游的鱼吖

已于 2022-11-11 11:07:47 修改

阅读量748

点赞数

分类专栏： vue JavaScript css笔记文章标签： javascript html servlet

于 2022-11-11 11:06:39 首次发布

本文链接：https://blog.csdn.net/qq_36702286/article/details/127802431

版权

JavaScript 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

8 篇文章 1 订阅

订阅专栏

css笔记

4 篇文章 0 订阅

订阅专栏

elementui的树型在手机端看  复选框点击第一下 只选中了 边框 不触发事件且出现是随机的，没找到解决的办法，只能换一种方式解决现有的问题
找了easyui的 tree 重新来一个

子组件

<style lang="scss">
    .tree {
        text-align: left;
        position: absolute;
        top: 6px;
        left: 0;
        z-index: 1030;
        background: #ffffff;
        max-height: 200px;
        min-height: 30px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #dddddd;
        width: calc(100% - 2px);
    }
    .tree-node{
        height: 30px;
    }
    .span-tx {
        line-height: 20px;
    }

    .span-g {
        padding: 2px 5px;
        border-radius: 3px;
        color: #ffffff;
        margin-left: 3px;

        &.span-1 {
            background: #909399;
        }

        &.span0 {
            background: #409eff;
        }

        &.span1 {
            background: #67C23A;
        }

        &.span2 {
            background: #E6A23C;
        }
    }

</style>
<template>
    <Tree :data="treeNodes" :checkbox="true" @checkChange="checkHandle">
        <template slot-scope="scope">
            <span class="span-tx">{{scope.node.name}}</span>
            <span class="span-g" :class="[scope.node.authType === '0' ? 'span0' : '']"
                  v-if="scope.node.authType === '0'">事业部</span>
            <span class="span-g" :class="[scope.node.authType === '-1' ? 'span-1' : '']"
                  v-if="scope.node.authType === '-1'">集团</span>
            <span class="span-g" :class="[scope.node.authType === '1' ? 'span1' : '']"
                  v-if="scope.node.authType === '1'">组织</span>
            <span class="span-g" :class="[scope.node.authType === '2' ? 'span2' : '']"
                  v-if="scope.node.authType === '2'">管理区域</span>
        </template>
    </Tree>
</template>

<script>
  export default {
    name: 'tree-select',
    data() {
      return {
        checkedNodes: null,
        treeNodes: [],
      };
    },
    created() {
      this.$ajax({
        url: '/user/auth-tree',
        method: 'get',
      }).then((d) => {
        //加上根节点
        let rootNode = {
          authType: "-1",
          name: "集团",
          checked: false,
          state: "closed",
          code: "-1"
        };
        let or = this.loop(d);
        rootNode.children = this.loop(d);
        this.treeNodes = [rootNode];
        console.log(this.treeNodes, '<---treeNodes');
      }).catch(() => {
      });
    },
    methods: {
      checkHandle(node) {
        let codeArr = [];
        node.map(item => {
          codeArr.push(item.code);
        });
        this.$emit('select-value', codeArr);
      },
      loop(children) {
        if (children && children.length > 0) {
          children.map(item => {
            if (item.children && item.children.length > 0) {
              item.state = 'closed'
            }
            if (item.children && item.children.length > 0) {
              this.loop(item.children);
            }
          });
        }
        return children
      }
    }
  };
</script>

父组件：

<tree-select @select-value="selectValueHandle"></tree-select>
.tree-ul {
  padding: 0 10px;
  .tree-box {
    position: relative;
    padding: 6px 10px 12px;
    height: 48px;
  }
}

tree-ul 主要是将tree浮起来

仅用于本人项目记录备份