[JavaScript知识库]element tree 可搜索可排序可选中功能

原型图如下：

要求可选择(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) //选中的数组
    },

    

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖