vue3 实现可拖拽 树形结构数据,无论拖拽子集或者父级,拖动的都是当前对象,父子没有关联关系,如何实现呢?或有什么插件支持? vue3-draggable-next,好像只支持列表,不支持树形结构
mysql树形结构筛选 mysql版本:5.7 有如下结构: CREATE TABLE tb_tree ( id INT NOT NULL PRIMARY KEY, pid INT not null default 0, full_path VARCHAR(255) NULL, FOREIGN KEY (pid) REFERENCES tb_tree(id) ); id:主键ID pid:树形结构,标识当前行的父节点ID full_path:当前行在树形结构中的路径,例如当前id为10,父节点为9,那么他的full_path为:9-10 例如在经过某一轮筛选后,有如下数据,或者说某个账号只能看到如下数据 «注意ID为100的数据,它的父节点99是存在的,只是业务逻辑中无法得到该节点的数据» INSERT INTO tb_tree (id, pid, full_path) VALUES (1, 0, '1'); INSERT INTO tb_tree (id, pid, full_path) VALUES (2, 1, '1-2'); INSERT INTO tb_tree (id, pid, full_path) VALUES (3, 2, '1-2-3'); INSERT INTO tb_tree (id, pid, full_path) VALUES (4, 3, '1-2-3-4'); INSERT INTO tb_tree (id, pid, full_path) VALUES (100, 99, '99-100'); INSERT INTO tb_tree (id, pid, full_path) VALUES (101, 99, '99-100-101'); INSERT INTO tb_tree (id, pid, full_path) VALUES (201, 200, '200-201'); 现在有如下需求: 1. 如果存在根节点的数据,那么这个根节点的所有叶子结点都忽略,只保留根节点,如上面id为1,2,3,4的数据,因为2,3,4都是1的叶子结点,因此只筛选出id为1的数据 2. id为100,101,根节点没有出现在数据中,因此保留当前出现的最顶级节点,但是其叶子结点都忽略 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241008/4ac33809ef14db3c07e296a909fccedd.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241008/bf8a0b5f8a0a2c92dea7a83f489a00fa.png) 3. 尝试先将pid=0也就是根节点的数据先取出来,然后筛选,但是因为整个节点还有分支,貌似5.7不支持两个集合取交集
element中el-tree组件,无限制增加下级菜单 为避免一次性请求接口返回数据太多,每次请求接口只能返回该层下一级数据,不会返回下级多层数据 {{ node.label }} 添加 Delete export default { data() { return { defaultProps: { children: 'sub_point_list', label: 'name', isLeaf: (data) => data.has_child === 0 }, } }, methods: { //添加下级菜单 append(data) { console.log('data', data) this.$set(data, 'sub_point_list', []) const newChild = { id: id++, name: 'testtest', isEgdit: true, sub_point_list: [] } if (!data.sub_point_list) { data.sub_point_list = [] } data.sub_point_list.push(newChild) // 强制更新视图 this.$forceUpdate(); // 展开当前节点 node.expand(); this.$nextTick(() => { this.$refs.inputVal.focus(); }) // this.dataSource = [...this.dataSource] }, } } 当有下级菜单时,点击箭头展开下级菜单,在点击添加按钮,能正常显示输入框添加菜单 如下图 "1.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/86ee0ba562549906e18a13c954521f15.png) 但是没有下级菜单时,即前边没有小箭头,点击添加按钮,数据也能打印出来,但是却显示不出来输入框,如下图 这里出错的原因在哪里呢? 还有就是当有数据时,点击添加按钮 怎么能直接展开下级并显示出输入框呢?现在是只有点击前边的小箭头展开下级后再点击添加按钮才能显示输入框,求教 "2.jpg" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/ed305418c06a4635ed3296f008fd8704.png)
对于MYSQL树形结构如何统计各个节点对应的业务数量 例如:mysql有id、type、parentId、num字段,type 1、2、3代表省市县,parentId为父级id,num代表各个类型的人口数量,一个市下面有多个县,市的num数量是该市下所有县num数量的和,省也是同理。 如果县人口出现了变化,有什么方案快速高效的更新各个节点的num。 如果人口变动这个业务在代码中各个模块都有涉及,并且还有批量变更和同时变更的情况,要保证数据的一致性该如何设计
el-tree 每次只请求到一级的数据, 返回数据为 [ { "id": 178, "name": "初一", "parent_id": 0, "type_id": 1008380, "seq": 1, "video_list": [], "has_child": 1 } ] 当has_child==1时有下级数据,显示小箭头,没有数据时不显示小箭头,如下图 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/bfce11953c4936657a3e8681deadde42.png) *** 当有数据时点击添加按钮,折叠状态展开,显示出input输入框,此时可以添加新节点,如下图 blur时添加成功,input再转为label显示 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/fa88f27c77062e939f845e6d15bba25d.png) *** 编辑时如下图 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240919/94c93196ffd257d375680468a37a92ea.png) 想找个类似的例子或者写法 求教
我有这样一段数据: { type: 'root', key: '8120abb2-d5c8-4843-8170-0ac1fc07a6c1', conditionValue: 'and', conditionLabel: '并且', children: [ { type: 'group', label: '规则组1', key: '143c2a99-8316-45aa-8bdf-6c5aea09ca56', conditionValue: 'or', conditionLabel: '或者', children: [ { type: 'dimension', label: '维度1', key: 'fa155535-f339-44d6-b368-32ac7f10b83f', conditionValue: 'or', conditionLabel: '或者', children: [ { type: 'rule', label: '规则1', key: '08979aee-221f-49a4-991c-39306317ecdc', dimensionLabel: '职位', dimensionValue: '1', conditionLabel: '等于', conditionValue: '=', inputLable: '1', inputValue: '1', }, { type: 'rule', label: '规则-2', key: '78aa74dc-4982-4a9f-93c4-5a16fdf0ea76', dimensionLabel: '职位', dimensionValue: '1', conditionLabel: '等于', conditionValue: '=', inputLable: '2', inputValue: '2', }, { type: 'rule', label: '规则-3', key: '8c760cf5-e042-4b33-ab08-c42282d74ed6', dimensionLabel: '职位', dimensionValue: '1', conditionLabel: '等于', conditionValue: '=', inputLable: '3', inputValue: '3', }, ], }, { type: 'dimension', label: '维度2', key: '30357f52-2773-4dd2-9775-88f55ba5fa77', conditionValue: '', conditionLabel: '', children: [ { type: 'rule', label: '规则1', key: 'db6e0e61-2374-43c9-8a3e-176cf6e9221b', dimensionLabel: '职级', dimensionValue: '2', conditionLabel: '不等于', conditionValue: '!==', inputLable: 'a', inputValue: 'a', }, ], }, { type: 'dimension', label: '维度3', key: '25864967-8226-494d-b1a5-536d5ad78eb1', conditionValue: '', conditionLabel: '', children: [ { type: 'rule', label: '规则2', key: '4ba45def-5b59-4022-8f41-c382ef1e98aa', dimensionLabel: '职级', dimensionValue: '2', conditionLabel: '不等于', conditionValue: '!==', inputLable: 'b', inputValue: 'b', }, ], }, ], }, { type: 'group', label: '规则组2', key: 'c1a86886-5f07-4454-915d-48370218aaaa', conditionValue: '', conditionLabel: '', children: [ { type: 'dimension', label: '维度1', key: '1785ce8f-55b4-4d5a-97b2-4b80244ebb17', conditionValue: '', conditionLabel: '', children: [ { type: 'rule', label: '规则1', key: 'e5b9f804-46f0-4082-ac40-024a5907248f', dimensionLabel: '职位', dimensionValue: '1', conditionLabel: '等于', conditionValue: '=', inputLable: 'cc', inputValue: 'cc', }, ], }, ], }, ], } 我想编写一个函数,该函数最终的返回结果为: ((职位 = 1 or 职位 = 2 or 职位 = 3) or (职级 != a or 职级 != b)) and (职位 = cc) 目前我用递归没写出来