vue树形多选表单

image.png

父级：

<template>
  <div>
    <tree-more
      ref="treeMore1"
      v-model="ids"
      :treeInput="treeInput"
      :treeData="treeData"
      @loadSelect="loadSelect"
    />
    <p>ids: {{ids}}</p>
    <p>treeInput: {{treeInput}}</p>
  </div>
</template>

<script>
import treeMore from "@/components/init/tree-more";
export default {
  components: {
    treeMore
  },
  data() {
    return {
      ids: "",
      treeInput: "",
      treeData: [
        {
          id: 1,
          text: "一级 1",
          children: [
            {
              id: 4,
              text: "二级 1-1",
              children: [
                {
                  id: 9,
                  text: "三级 1-1-1"
                },
                {
                  id: 10,
                  text: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          text: "一级 2",
          children: [
            {
              id: 5,
              text: "二级 2-1"
            },
            {
              id: 6,
              text: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          text: "一级 3",
          children: [
            {
              id: 7,
              text: "二级 3-1"
            },
            {
              id: 8,
              text: "二级 3-2"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    // this.getTreeData();
  },
  methods: {
    loadSelect(data) {
      this.treeInput = data.treeInput;
      this.ids = data.ids;
      console.log("loadSelect", data);
    },
    getTreeData() {
      this.$HTTP.api({
        url: APP_ROOT + "/DRS/query/record/ipGroupInfo",
        showLoading: false,
        successCallback: function(res) {
          if (res) {
            this.treeData = res;
            this.$refs.treeMore1.selectTreeAll(res);
            // this.search()
          }
        }.bind(this)
      });
    }
  }
};
</script>

子级：tree-more.vue

<!--tree-select树表单 还有一个 tree-select-lazy和tree-input-->
<template>
  <div>
    <el-input
      :placeholder="placeholder"
      :style="{width}"
      id="Treeicp2"
      class="selectTree-input"
      auto-complete="off"
      v-model="treeInput"
      @click.native="changeSelectTree"
      disabled
      clearable
    ></el-input>
    <el-tree
      v-show="isShowSelect"
      ref="selectTree2"
      show-checkbox
      empty-text="暂无数据"
      :highlight-current="false"
      :default-expand-all="true"
      :expand-on-click-node="true"
      :props="props"
      :data="treeData"
      node-key="id"
      @check="loadSelect"
      class="objectTree selectTree"
    ></el-tree>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ""
    },
    treeInput: {
      type: String,
      default: ""
    },
    treeData: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: String,
      default: "220px"
    }
  },
  data() {
    return {
      props: {
        label: "text",
        children: "children"
      },
      isShowSelect: false
    };
  },
  methods: {
    //点击选择框
    loadSelect() {
      let res = this.$refs.selectTree2.getCheckedNodes();
      let arr = [];
      res.forEach(item => {
        arr.push(item.text);
      });
      this.$emit("loadSelect", {
        treeInput: arr.join(";"),
        ids: this.$refs.selectTree2.getCheckedKeys().join(";")
      });
    },
    changeSelectTree() {
      this.isShowSelect = !this.isShowSelect;
    },
    //全选(参照默认选中)
    selectTreeAll(selData) {
      setTimeout(() => {
        this.$refs.selectTree2.setCheckedNodes(selData);
        this.loadSelect();
      }, 0);
    },
    //清空
    resetChecked() {
      this.$refs.selectTree2.setCheckedKeys([]);
    }
  },
  mounted() {
    let that = this;
    document.addEventListener("click", function(e) {
      if (e.target.className != "selectTree" && e.srcElement.id != "Treeicp2") {
        that.isShowSelect = false;
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.objectTree {
  position: absolute;
  overflow: auto;
  z-index: 100;
  min-height: 150px;
  max-height: 260px;
  min-width: 220px;
  max-width: 420px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  line-height: normal;
  z-index: 204;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.width-220 {
  width: 220px;
}
.objectTree::-webkit-scrollbar {
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.objectTree::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #969696;
}

.objectTree::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: #ededed;
}
</style>