element树节点保存与回显的一些问题

问题描述:在用element的tree组件实现多选树的时候,保存的时候后台需要将半选中的节点一起保存到数据库中,但是回显的时候需要将半选中的节点剔除,否则会导致该节点下的所有节点置为选中状态。

解决办法:

//保存时将半选中的节点一起获取到
const ids=proxy.$refs["treeRef"].getCheckedNodes(false,true)

//回显默认选中的节点时只回显子节点的选中状态
const defaultChecked=['1','2','4']    //默认选中的节点id数组
defaultChecked.map(i => {
     let node = proxy.$refs["treeRef"].getNode(i);
     if (node.isLeaf) {
       proxy.$refs["treeRef"].setChecked(node, true);
     }
 });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Element UI Cascader 组件的回显可以通过设置 v-model 属性来实现。当选中某个节点时,该节点的值会被存储在 v-model 绑定的变量中,从而实现回显。如果需要回显多个节点,可以将 v-model 绑定到一个数组中。同时,可以通过设置默认值来实现组件的初始回显。具体实现方式可以参考 Element UI 官方文档中 Cascader 组件的使用说明。 ### 回答2: Element UI 是一套基于 Vue.js 的桌面端组件库,其中 Cascader 是其中的一种选择器组件,可以实现多级联动选择的效果。在使用 Cascader 组件时,可能会需要一些数据的回显,例如需要在 Cascader 中预选中一些已经选择的选项,或者在编辑时需要回显之前保存的数据。那么如何实现 Element UI Cascader 数据回显呢? Element UI Cascader 提供了两个属性用于实现数据回显,分别是 value 和 selectedOptions。其中 value 属性接受一个数组,可以将需要回显的数据作为数组赋值给 value,然后 Cascader 会自动按照数组中的数据展示相应的选项。例如: ```html <el-cascader :options="options" v-model="selectedOptions" :value="preSelectedValue"></el-cascader> ``` 上述代码中,options 是 Cascader 的选项数据,v-model 用于绑定 Cascader 组件的当前值,preSelectedValue 是一个预选择的数组,可以用来回显数据。 如果需要回显多级数据,可以传入一个数组。如果需要回显单级数据,可以直接传入一个字符串或数字。 另一个用于回显的属性是 selectedOptions,它接受一个数组作为选中的选项,可以直接将需要回显的选项数据赋值给 selectedOptions,例如: ```html <el-cascader :options="options" v-model="selectedOptions" :selected-options="preSelectedOptions"></el-cascader> ``` 上述代码中,preSelectedOptions 是一个预选中的选项数据数组,直接将其赋值给 selectedOptions 以实现数据回显的效果。 总的来说,Element UI Cascader 数据回显非常简单,只需要通过 value 或 selectedOptions 属性将需要回显的数据传递给 Cascader 组件即可。需要注意的是,传递的数据必须与 Cascader 组件的选项数据格式保持一致,否则回显效果可能会出现问题。 ### 回答3: Element UI的Cascader是一个非常强大的级联选择组件,它可以让用户通过层级展开来选择需要的选项。在不少应用中,我们的用户会需要修改他们之前选过的选项,所以我们需要让我们的Cascader组件支持回显选项。 Element UI提供了几个属性来控制Cascader的选项: 1. value - 用于设置当前选中的选项 2. options - 用于设置级联选择的选项列表 3. change-on-select - 用于控制是否在每次选择一个选项时都会触发change事件 为了实现Cascader的回显功能,我们需要把之前选中的选项传递给value属性。这个选项可以是一个数组格式的值,每个元素表示一级的选项。 下面是一个例子,我们假设之前用户选择了"山东"省、"青岛"市、"市南"区作为地址,在之后用户再次打开时我们需要把选项回显出来: ```html <el-cascader :options="options" :change-on-select="true" v-model="selectedCities" ref="cascader" ></el-cascader> ``` ```javascript export default { data() { return { options: [ { value: "shandong", label: "山东", children: [ { value: "qingdao", label: "青岛", children: [ { value: "shinan", label: "市南" }, { value: "shibei", label: "市北" } ] } ] } ], selectedCities: ["shandong", "qingdao", "shinan"] }; }, mounted() { // 让组件展开到最后一级 this.$nextTick(() => { const cascader = this.$refs.cascader; cascader.setVisible(true); cascader.handleExpandChange(true, 1); cascader.setVisible(true); cascader.handleExpandChange(true, 2); }); } }; ``` 在上面的例子中,我们初始化了一个options选项列表,我们同时将山东、青岛、市南这三级选项都传递给了selectedCities属性。这样,当组件渲染出来时,就会默认选中这三级选项。 另外,为了让组件展开到最后一级,我们在mounted钩子函数中,通过调用组件的handleExpandChange方法来展开选项。最后我们通过使用setVisible方法将整个组件展现出来。 综上所述,我们可以通过在selectedCities属性中传递之前选中的选项来实现Cascader的回显功能。同时我们也可以使用Element UI提供的一些方法,让组件展开到指定的级别,这样就能完美地显示出之前的选择。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值