jhit-vue-select-treecom

安装

npm install jhit-vue-select-treecom

或

yarn add jhit-vue-select-treecom

使用

// main.js
import SelectTreecom from 'jhit-vue-select-treecom/lib/jhit-vue-select-treecom.umd.min'
import 'jhit-vue-select-treecom/lib/jhit-vue-select-treecom.css'

Vue.use(SelectTreecom)

更多请参考examples/App.vue

<!-- pc端选择树使用方式 -->
<SelectTreecom
  :isShow.sync="isShow"      // 弹窗展示      Boolean
  :checkMode="multiple"      // 选择类型      String   default: 'multiple'（多选）
  :axiosConfig="axiosConfig" // 网络请求配置      Object
  :isLazy="false"            // 是否懒加载    Boolean  default: false
  :isFirstNeedRequst="false" // root是否需要加载 Boolean  default: true
  :dataTree="dataTree"       // 懒加载root数据源  Object
  :limit="20"                // 最大选择数目  Number
  :allowSort="false"         // 是否排序      Boolean  default: false
  @selectDefine="selectDefine(value)"  // 确定事件 @selectDefine value为已选择的数据
/>

<!--最简使用 -->
<SelectTreecom
  :isShow.sync="isShow"
  :axiosConfig="axiosConfig"
/>
data() {
  return () {
    isShow: false // 通过外部事件触发弹窗打开关闭 required: true
    axiosConfig: {
      // 头部信息 required: false
      headers: {
        Authorization: ''
      },
      // 请求路径 required: true
      url: 'http://188.3.14.147:7015/visit/api/petition/typeTree/getAllTree',
      // 请求方式 required: true
      methods: 'get'
    }
  }
}

<!--懒加载数据方式 -->
<SelectTreecom
  :isShow.sync="isShow"      // 弹窗展示      Boolean
  :axiosConfig="axiosConfig" // 请求配置      Object
  :isLazy="true"             // 是否懒加载    Boolean
  :dataTree="dataTree"       // 懒加载root数据源  Object
  :isFirstNeedRequst="true"  // root是否需要加载 Boolean
/>
data() {
  return () {
    isShow: false // 通过外部事件触发弹窗打开关闭 required: true
    axiosConfig: {
      // 头部信息 required: false
      headers: {
        Authorization: ''
      },
      // required: true
      url: 'http://188.3.14.147:7015/visit/api/petition/AreaExtend/listAll',
      // required: true
      methods: 'get',
      // 根节点数据如果需要加载需要传递的参数
      params： {}
      // 子节点加载如果需要请求传递参数，传递的参数pid与节点中数据id对应 required: true
      extraProp: {
        'pid': 'id', 或者 'id': 'id'
        'lelve': 'lelve'
      }
    },
    // 根节点数据也可直接写上
    dataTree: [
      { name: '', id: '' }
    ]
  }
}

<!-- 移动端选择树使用方式 -->
<JhitMselect
  :axiosLConfig="axiosLConfig" // 网络请求配置 Object
  :limit="30"                  // 限制选择数量 Number
  @confirm="confirm"           // 确定事件 @confirm value为已选择的数据
/>
data() {
  return () {
    axiosLConfig: {
      // 头部
      headers: {
        Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIyMjIyMjIyMjIiLCJhdXRoIjoiMSIsImV4cCI6MTY2NjI3MjAxMX0.TcLpDV0WXxHmVJQStL7fgi52Z7RMMND-2anqlaI_-lzjZVXQC1nSYhWeR-RWlN5IHlzZ8IoqeyPUXbJ9fn1Ftg'
      },
      url: 'http://188.3.14.147:7013/databoard/api/admin/area/userinfo/lazy/tree',
      methods: 'get', // 请求方式
      params: {}
    }
  }
}

参考

https://zhuanlan.zhihu.com/p/337520239