原型图如下:
要求可选择(check) 可排序(drag) 可搜索 (filter) element中tree组件可满足需求 不过要将三个功能融合 并解决一些小问题:比如-选中之后 再拖拽 ,选中状态就消失了
html
<el-tree :data="data"
node-key="id" show-checkbox default-expand-all @node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" class="filter-tree"
:props="defaultProps" :filter-node-method="filterNode" ref="tree" @check="check">
</el-tree>
data
defaultSelect: [],
filterText: '',
data: [
{
id: 0,
label: '供应商全选',
children: [{
id: 1,
label: 'xxx供应商1x商1xxx供应商1',
},
{
id: 6,
label: 'xxx供应商6',
},
{
id: 7,
label: 'xxx供应商xxx供应商7xxx供应商7xxx供应商77',
},
{
id: 5,
label: 'xxx供应商5'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
js
watch: {
filterText(val) {
console.log(val)
this.$refs.tree.filter(val);
},
},
methods: {
handleDragStart(node, ev) {
// console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
// console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
// console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
// console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
// console.log('tree drag end: ', dropNode && dropNode.label, dropType);
console.log(this.data[0].children) //拖拽完的顺序
console.log(this.defaultSelect)
},
handleDrop(draggingNode, dropNode, dropType, ev) {
// console.log('tree drop: ', dropNode.label, dropType);
this.setCheckedKeys();
},
allowDrop(draggingNode, dropNode, type) { //不能拖拽至下级节点
if (dropNode.data.label === '供应商全选') {
return type !== 'prev' && type !== 'next';
}
return type !== 'inner';
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//自定义选中方法
setCheckedKeys() {
// 确保数据渲染到tree之后再做checked
setTimeout(() => {
this.$refs.tree.setCheckedKeys(this.defaultSelect);
}, 5);
},
//只有点击的时候才会触发
check(data, checkNodes) {
//点击的时候获取选中的节点,更改defaultSelect
this.defaultSelect = checkNodes.checkedKeys //选中的节点
console.log(this.defaultSelect) //选中的数组
},