关于el-tree的一些处理

        // 给树设置某个节点禁用
        addAttr(data, id) {
            data.forEach(item => {
                if (item.adCode == id) {
                    this.addAttrChildrens(item);
                } else {
                    if (item.childAddress && item.childAddress != null && item.childAddress.length !== 0) {
                        this.addAttr(item.childAddress, id);
                    }
                }
            });
        },
        // 父节点禁止点击,它的后代子节点所有都禁止点击
        addAttrChildrens(node) {
            node.disabled = true;
            if (node.childAddress != null) {
                node.childAddress.forEach(ele => {
                    ele.disabled = true;
                    this.addAttrChildrens(ele);
                });
            }
        },
   
        // 多选框选中数据
        handleCitysChange(selection) {
            this.cityIds = selection.map(item => item.adCode)
            this.multiple = !selection.length
        },
        // 选城市如果选中所有子集只显示父级
        getSimpleCheckedNodes(store) {
            const checkedNodes = [];
            const traverse = function (node) {
                const childNodes = node.root ? node.root.childNodes : node.childNodes;

                childNodes.forEach(child => {
                    if (child.checked) {
                        checkedNodes.push(child.data);
                    }
                    if (child.indeterminate) {
                        traverse(child);
                    }
                });
            };
            traverse(store)
            return checkedNodes;
        },

项目中的一些知识点记录一下,便于下次遇到查看

### 关于 `el-tree` 组件的前后端交互处理 #### 后端准备数据结构 为了使前端能够正确解析并渲染树状结构的数据,后端返回给前端的数据应当是一个嵌套的对象数组。每个对象代表一个节点,并且可以包含子节点列表。通常情况下,这些数据会有一个唯一的标识符(如 ID),以及指向父级节点的字段。 对于权限管理场景下的菜单配置来说,假设存在如下 JSON 数据格式: ```json [ { "id": 1, "label": "一级 1", "children": [ { "id": 4, "label": "二级 1-1", "children": [ {"id": 9, "label": "三级 1-1-1"}, {"id": 10, "label": "三级 1-1-2"} ] } ] }, ... ] ``` 此部分描述了如何构建适合传递到前端使用的树形结构化数据[^1]。 #### 前端接收与初始化 在接收到上述形式的数据之后,在 Vue.js 中可以通过定义响应式的属性来存储这个树形结构,并将其绑定至 `<el-tree>` 组件上作为其 `data` 属性值。同时还需要设置其他必要的参数比如 `node-key`, `props` 等以便更好地控制组件行为。 下面是一段简单的代码片段展示了这部分逻辑: ```html <template> <!-- Tree Component --> <el-tree :data="treeData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> </el-tree> </template> <script setup lang="ts"> import { ref } from 'vue'; // Assume treeData is fetched via API call or passed as props. const treeData = ref([ /* ... */ ]); </script> ``` 这段代码实现了基本的树形控件展示功能。 #### 用户选择后的提交操作 当用户完成了对某些项的选择后,可能希望将所做更改同步回服务器保存起来。此时就需要收集当前被选中的键值集合并通过 HTTP 请求发送出去更新数据库记录。 Element Plus 提供了一个便捷的方法叫做 `getCheckedKeys()` 可以用来获取所有已勾选项对应的 id 列表。因此可以在按钮点击事件处理器内调用该函数并将结果封装成适当的形式传送给后台服务接口。 以下是具体的实现方式: ```html <!-- Dialog containing the tree component and submit button --> <el-dialog v-model="dialogVisible" title="Select Permissions"> <el-tree ref="treeRef" :data="treeData" show-checkbox node-key="id" highlight-current :props="defaultProps"> </el-tree> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitSelection">Confirm Selection</el-button> </span> </el-dialog> ``` ```javascript export default { data() { return { dialogVisible: false, defaultProps: { children: 'children', label: 'label' } }; }, methods: { async submitSelection () { const checkedIds = this.$refs.treeRef.getCheckedKeys(); try { await axios.post('/api/savePermissions', { permissions: checkedIds }); // Handle success response here... console.log('Permissions saved successfully.'); } catch (error) { // Handle error appropriately... console.error(error); } this.dialogVisible = false; } } } ``` 这里通过监听对话框内的确认按钮触发 `submitSelection` 方法完成最终的数据提交过程[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值