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: {}
}
}
}