道招

修改页面的element-ui级联菜单使用

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

修改页面的element-ui级联菜单使用

根据官方给的例子我们可以知道,在级联菜单被选择时,我们获取的是一个数组,已选择流程id为例,类似
[1, 11, 112]
但是很多情况下,我们在传递选择结果给后端接口的时候,我们只是传112而已,这一般是后端给的每个id是不会重复,传递一个最后的子节点即可。 就常规的CRUD业务而已,在新增时这不算什么问题,而在修改时,接口肯定会只返回112(因为当初你新增的时候只传递了112而已),这个时候你可能就得根据112寻找到11,再根据11寻找到1,一般来说我们的数据格式是类似这样的
{
    id: 1,
    parentId: 0,
    children: [{
        id: 11,
        parentId: 1,
        children: [{
            id: 111,
            parentId: 11
        }, {
            id: 112,
            parentId: 11
        }]
    }, {
        id: 12,
        parentId: 1
    }]
}
顶级的id的parentId为0,这是我们根据112的parentId递归向上查找,知道该节点的parentId = 0为止。这样我们就得到了数组[1, 11, 112]。 直接上代码,里面额dataForm就是接口当前的详细信息
<el-form-item label="流程" prop="procedureId">
  <el-cascader :options="proceduresArrayed" ref="proceduresCasader" v-model="selectedProcedureIdOptions" placeholder="请选择流程"/>
</el-form-item>

computed:{
    ...mapState('procedure',{
      detailMap: state=> state.detailMap,
    }
    dataForm(){
      return this.detailMap[this.$route.params.pId] || {};
    },
    selectedProcedureIdOptions: {
      get:function(){
        return this.getProcedureIds(this.dataForm.procedureId);
      },
      set:function(valueArr){
        let selectedValues = valueArr.slice(0);
        this.dataForm.procedureId = selectedValues.pop();
      },
    },
},
methods:{
    getProcedureIds(id){ // 略
    .....
    return [...]
    }
}
说下这里为什么把selectedProcedureIdOptions放到computed里面,因为后端接口返回的procedureId无法直接使用在v-model上,这样的话,导致的结果及时级联菜单没有当前选中项,测试和产品经理肯定不爽的。我们需要用getProcedureIds方法递归查找得到[1, 11, 112],但是不能直视单纯的用computed,因为那样只是用到了它的get方法,我们既然绑定到了v-model上,自然代表可能要修改它,此时vue会报警告的,我们把更改的操作应该写在set,这个不难理解,只是刚开始可能不知道computed可以这么玩。在set方法中,我们又将选中的[1, 11, 112]变成112放到this.dataForm中,提交的时候,只提交this.dataForm就可以了。
更新时间:
上一篇:element-ui动态表单async-validate校验 please transfer a valid prop path to form item!下一篇:nodejs dgram模块广播+组播

相关文章

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了