easyUl tree 做 select 下拉多选

原创已于 2022-11-11 11:07:47 修改 · 964 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #servlet

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

JavaScript 同时被 3 个专栏收录

17 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

css笔记

5 篇文章

订阅专栏

本文记录了一个关于移动端使用ElementUI的树形组件时遇到的复选框点击问题，该问题表现为在某些情况下点击复选框只会选中边框而不会触发事件。由于无法找到解决方案，作者选择采用EasyUI的树组件作为替代方案。文章提供了EasyUI树组件的样式和模板代码，并展示了如何处理节点的选中事件。同时，还给出了父组件的样式以确保树组件在页面上的正确显示。

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浮起来