element 树节点的选择(带父节点id)(回显时父子不关联,选中时关联)

该文章展示了在Vue.js应用中如何使用el-tree组件,配置属性如data,show-checkbox,default-expand-all,node-key等实现全展开和节点选中功能。checkChange方法处理节点选中状态,维护节点选中集合,并处理半选中状态。同时,文章还涉及了去重操作以确保节点ID的唯一性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         <el-tree
            :data="SQData"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            @check-change="checkChange"
          >
          </el-tree>

在这里插入图片描述

data(){
  return{
      SQData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
  }
}
methods:{
    checkChange(node, bool, child) {
    // 选择的时候,父子关联
      this.checkStrictly = false
      if (bool) {
        this.nodeChecked = [...this.nodeChecked, node.id]
      } else {
        this.nodeChecked = this.nodeChecked.filter((item) => item !== node.id)
      }
      // 获取父选中元素
      let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      // 合并选中
      this.nodeChecked = this.nodeChecked.concat(hafCheckedKeys)
      let arr = this.nodeChecked
      function unique(arr) {
        return Array.from(new Set(arr))

      }
      this.nodeChecked = unique(arr)
      console.log(this.nodeChecked, 123456);
    },}
### Element UI 选择器组件使用方法及数据 #### 解决方案概述 为了有效处理Element UI的选择器组件特别是`el-cascader`级联选择器的数据问题,可以采取一种优化的方法来减少必要的API请求次数并简化开发流程。对于懒加载模式下的级联选择器而言,通常面临的主要挑战在于如何高效地实现已选选项的示以及新选项的选择过程。 #### 实现细节 针对上述提到的问题,在实际项目应用中可以通过如下方式解决: - **自定义封装**:创建一个新的Vue组件继承原有的`el-cascader`功能,并在此基础上增加额外逻辑支持更灵活的数据管理和展示需求。 - **数据结构调整**:当服务器端返的数据仅包含ID,前端应构建完整的路径信息以便于渲染正确的层级关系[^2]。 - **最小化网络请求**:通过缓存机制保存已经获取过的节点信息,避免重复查询相同级别的子项列表;同只在必要候发起异步调用来加载未见过的内容[^1]。 下面给出一段简单的代码片段作为示范,展示了如何设置属性和绑定模型值以完成基本配置: ```html <template> <div class="example"> <!-- 级联选择器 --> <el-cascader :options="options" v-model="selectedOptions" :props="{ checkStrictly: true }" @change="handleChange"></el-cascader> </div> </template> <script> export default { data() { return { options: [], // 初始化为空数组 selectedOptions: [] }; }, methods: { handleChange(value) { console.log('changed:', value); } }, mounted(){ this.loadInitialData(); // 假设这是一个函数用于初始化加载一些基础数据 } }; </script> ``` 此示例中的`:props`参数允许开发者指定特定行为特性,比如这里启用了`checkStrictly`使得父子节点之间的关联再严格依赖,从而更好地适应某些特殊场景的需求[^3]。 另外需要注意的是,如果涉及到日期类型的字段,则可能需要用到其他形式的间控件来进行相应的操作,例如利用`el-date-picker`配合JavaScript内置的对象进行格式转换等[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值