0.0.34 • Published 2 years ago
y-member-select v0.0.34
w-member-select
:::demo
import { ref, defineComponent } from '@vue/composition-api'
import WMemberSelect from '@weier/w-member-select'
let i = 0
export default defineComponent({
setup() {
const list = ref([])
const val = ref('')
const loadNode = (node, resolve) => {
setTimeout(() => {
i++
let isLeaf = false
if (i > 3) {
isLeaf = true
}
resolve([{
label: "子部门1_"+i,
value: "name_" + Math.random(),
icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
isLeaf
},
{
label: "子部门2_"+i,
value: "name_" + Math.random(),
icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
isLeaf
}])
}, 400)
}
const remoteMethod = (query, resolve) => {
setTimeout(() => {
resolve([
{
label: "个人",
children: [{
icon: "el-icon-s-custom",
label: "苏定",
value: "bumen + value",
desc: "描述内容,在右侧展示",
isLeaf: true
}],
}, {
label: "部门",
children: [{
label: "财务部",
value: "name",
icon: "el-icon-folder",
desc: "描述内容,在右侧展示",
isLeaf: false
}]
}
])
}, 300)
}
return () => (
<div>
<WMemberSelect
value={list.value}
onChange={e => list.value = e}
title="选择员工"
queryPlaceholder="请输入成员或部门"
selectedText="已选择的部门或成员"
loadNode={loadNode}
remoteMethod={remoteMethod}
>
<el-input
placeholder="请点击选择员工"
readonly
/>
</WMemberSelect>
</div>
)
}
})
:::
Install
npm i w-member-select --save-dev
import WMemberSelect from 'w-member-select'
Attributes
*v-model
选中的节点返回的数组
multiple
多选状态,true多选,false单选
title
模态窗的标题
queryPlaceholder
模态窗左侧搜索框的placeholder内容
selectedText
模态窗右侧标题
showTreeData
搜索的时候是否显示树形结构 布尔型 默认false 不显示树形结构
showSelectedNum
是否显示已选择总数 布尔型 默认false 不显示
treeData
所有节点数据,直接加载,如果load-node存在,则load-node优先级更高
*load-node
加载子节点数组, node被展开的节点,第0级默认直接加载展开,示例如下
loadNode (node, resolve) {
if(node.level === 0){
// 根节点
} else {
// node.data为节点数据
}
setTimeout(() => {
i++
let isLeaf = false
if (i > 3) {
isLeaf = true
}
resolve([{
label: "子部门a",
value: "name1",
disabled: false,
icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
isLeaf
},
{
label: "子部门b",
value: "name2",
disabled: false,
icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
isLeaf
}])
}, 400)
}
*remote-method
搜索返回结果, query为搜索内容,示例如下:
// 搜索返回结果
remoteMethod (query, resolve) {
setTimeout(() => {
resolve([
{
label: "个人",
children: [{
icon: "el-icon-s-custom",
label: "苏定",
value: "bumen + value",
desc: "描述内容,在右侧展示",
disabled: false,
isLeaf: true
}],
}, {
label: "部门",
children: [{
label: "财务部",
value: "name",
icon: "el-icon-folder",
desc: "描述内容,在右侧展示",
disabled: false,
isLeaf: false
}]
}
])
}, 300)
}
append-to-body
boolean, dialog的是否添加到body
dialogWidth
string, dialog的width
handle-confirm
弹窗确定回调(非必要) :handle-cancel="handleConfirm"
handleConfirm (list, done) {
// 选中的数据
console.log(list)
// done则正常关闭模态窗
done()
}
handle-cancel
弹窗取消回调(非必要) :handle-cancel="handleCancel"
handleCancel (done) {
console.log("关闭")
done()
},
disabled
boolean, 是否静默弹窗选择
// 关闭弹窗判断(非必要)
handleConfirm (list, done) {
console.log(list)
// done则正常关闭模态窗
done()
}
select-leaf-only
true: 只能选择叶子节点, 默认false
Method
getTreeNodes 获取node
TODO: description