element tree数型控件兄弟节点之间控制和子节点拖动控制

    <el-tree
    :data="treeList"
    node-key="id"
    default-expand-all
    show-checkbox            
    draggable
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
   ></el-tree>
  data() {
    return {
      treeList: []
    }
  },
  mounted() {
    let list = {
      obj: [
         {
		"children": [{
			"children": null,
			"createTime": null,
			"createUser": "",
			"fraction": null,
			"houseId": "",
			"id": 99,
			"level": null,
			"name": "玫瑰花",
			"orgCode": "",
			"pid": 30,
			"selected": null,
			"sign": 0,
			"sort": null,
			"tempId": ""
		}, {
			"children": null,
			"createTime": null,
			"createUser": "",
			"fraction": null,
			"houseId": "",
			"id": 100,
			"level": null,
			"name": "菊花",
			"orgCode": "",
			"pid": 30,
			"selected": null,
			"sign": 0,
			"sort": null,
			"tempId": ""
		}, {
			"children": null,
			"createTime": null,
			"createUser": "",
			"fraction": null,
			"houseId": "",
			"id": 101,
			"level": null,
			"name": "茉莉花",
			"orgCode": "",
			"pid": 30,
			"selected": null,
			"sign": 0,
			"sort": null,
			"tempId": ""
		}],
		"createTime": null,
		"createUser": "",
		"fraction": null,
		"houseId": "",
		"id": 30,
		"level": null,
		"name": "鲜花",
		"orgCode": "",
		"pid": 0,
		"selected": null,
		"sign": 0,
		"sort": 2,
		"tempId": ""
	},
      ],
      res: 1,
      resMsg: "",
    };
    this.treeList=list.obj
    let data = list.obj
    data = JSON.stringify(data).replace(/name/g, 'label')
    data = JSON.parse(data)
    this.treeList = data;
  },
  methods: {
    //控制那个可拖拽节点
    allowDrag(draggingNode, dropNode, type){
        if (draggingNode.data.sign == 0) {
          return false;
        } else {
          return true;
        }
    },
    //同级节点才可以拖拽
     allowDrop(draggingNode, dropNode, type) {
        if (draggingNode.level === dropNode.level) {
          if (draggingNode.parent.id === dropNode.parent.id) {
            // 向上拖拽 || 向下拖拽
            return type === "prev" || type === "next";
          }
        } else {
          // 不同级进行处理
          return false;
        }
      },
   }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 的 Tree 树形控件中,可以结合使用过滤和 show-checkbox 属性来实现节点过滤和只能选择可见节点的效果。具体实现步骤如下: 1. 设置 Tree 组件的 filter-node-method 属性,这个属性可以指定一个过滤方法,用于过滤不需要显示的节点。例如: ```html <template> <el-tree :data="data" :filter-node-method="filterNode" :show-checkbox="true" @check-change="handleCheckChange" ></el-tree> </template> <script> export default { data() { return { data: [ // 树形数据 ] } }, methods: { filterNode(value, data) { // 过滤节点的方法 // value 为搜索框中输入的值 // data 为当前节点的数据对象 // 返回 true 表示需要显示节点,返回 false 表示不需要显示节点 return data.label.indexOf(value) !== -1; }, handleCheckChange(data, checked) { // 处理节点选中事件 // data 为选中节点的数据对象 // checked 为选中状态,true 为选中,false 为取消选中 } } } </script> ``` 上面的代码中,我们设置了 filter-node-method 属性为 filterNode 方法。这个方法会在过滤节点时被调用,我们在这个方法中通过判断当前节点的 label 是否包含搜索框中输入的值来决定节点是否需要显示。 2. 在 handleCheckChange 方法中,需要判断当前选中的节点是否可见。如果节点不可见,则需要取消选中它。例如: ```javascript handleCheckChange(data, checked) { const node = this.$refs.tree.getNode(data.key); // 获取当前节点的 DOM 元素 if (node && !node.offsetParent) { // 如果节点不可见,则取消选中它 this.$refs.tree.setChecked(data.key, false); } } ``` 上面的代码中,我们首先通过 this.$refs.tree.getNode(data.key) 方法获取当前节点的 DOM 元素,然后判断这个元素的 offsetParent 属性是否为 null。如果为 null,说明节点不可见,我们就通过 this.$refs.tree.setChecked(data.key, false) 方法取消选中它。 通过上面的实现,我们就可以实现节点过滤和只能选择可见节点的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值