修改页面的element-ui级联菜单使用
如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！
修改页面的element-ui级联菜单使用
[1, 11, 112]
就常规的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
}]
}
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 [...]
}
}
[1, 11, 112]，但是不能直视单纯的用computed，因为那样只是用到了它的get方法，我们既然绑定到了v-model上，自然代表可能要修改它，此时vue会报警告的，我们把更改的操作应该写在set，这个不难理解，只是刚开始可能不知道computed可以这么玩。在set方法中，我们又将选中的[1, 11, 112]变成112放到this.dataForm中，提交的时候，只提交this.dataForm就可以了。- 分类：
- Web前端
更新时间：
