小白第二课 - Treeselect下拉树选择

1、安装依赖

  • 命令:npm install —save @riophae/vue-treeselect

2、页面引入

import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3、HTML

<div class="modal-bg" v-show="addShow" @mousemove="modalMove" @mouseup="cancelMove">
          <div class="modal-container">
            <div class="modal-header" @mousedown="setStartingPoint">添加产品</div>
            <div class="modal-main">
              <slot>
                <a-input placeholder="请输入产品名称" style="width:100%" v-model="productName"/>
                <tree-select
                  :options="options"
                  placeholder="请选择分类..."
                  v-model="value"
                />
              </slot>
            </div>
            <div class="modal-footer">
              <div class="addProduct" @click="hideAddProduct">取消</div>
              <div style="display:flex;align-items:center" class="a_box" @click="submitAddProduct">
                <span class="add">确定</span>
              </div>
            </div>
          </div>
        </div>

Tree属性:

  • options :参数序列(数据源)
  • v-model :选中参数id,页面输出示例:{{value}}

4、引入组件

components: { TreeSelect }

5、获取已经递归好的后台参数

  • typeId:类型id
  • typeName:类型名称
  • parentId:父节点id
  • childrenMark:下一层节点数量,同时用做递归出口
  • typeChildrenList:子类型集合

6、设置data参数

    data() {
      return {
        productId: "",
        productName: "",
        typeName: "",
        deleteStatus: "",
        typeId:"",
        addShow: false,
        x: 0,
        y: 0,
        node: null,
        isCanMove: false,
        pageCount1: 10,
        value: 0,
        options: [],
        typeChildrenList:[],
        typeName:"",
        childrenMark:"",
        parentId:""
      };
    },

6、初始化数据

    mounted() {
      this.queryCategoryList();
    },

7、前端递归拼接(已产品类型列表为例)

//列表
      queryCategoryList () {
        var that = this;
        getProductTypeList( that.typeName )
          .then((res) => {
            let result = []
            const children = this.getTree(res.data)
            let obj = {}
            obj.label = '目录'
            obj.id = 0
            obj.children = children
            result.push(obj)
            this.options = result
          }).catch(error => {
          this.$Notice.error({
            title: '错误',
            desc: '网络连接错误'
          })
        })
      },
//数据拼接 - 递归拼接
      getTree (tree = []) {
        let arr = [];
        if (tree.length !== 0) {
          tree.forEach(item => {
            let obj = {};
            obj.label = item.typeName;
            obj.id = item.typeId;
            obj.parentId = item.parentId;
            obj.deleteStatus = item.deleteStatus;
            if(item.childrenMark !== "0") {
              obj.children = this.getTree(item.typeChildrenList);
            }
            arr.push(obj);
          });
        }
        return arr
      },

7、控制弹窗的拖拽

      setStartingPoint(e) {
        this.x = e.clientX - this.node.offsetLeft
        this.y = e.clientY - this.node.offsetTop
        this.isCanMove = true
      },
      modalMove(e) {
        if (this.isCanMove) {
          this.node.style.left = e.clientX - this.x + 'px'
          this.node.style.top = e.clientY - this.y + 'px'
        }
      },
      cancelMove() {
        this.isCanMove = false
      },

7、效果图