低代码快速实现省市区级联选择功能2.0进阶版
Sen
• 发表于:2021-09-26 00:07:25 • 更新于:2021-09-26 00:07:25
476

目标:

在新建客户时,实现省市区的级联选择,并且限制前后关系,选择顺序固定是省—市—区,清除选择时,同时清除后面的选项;

准备工作:

创建客户表、省市区三个表,其中客户表关联了省市区三个表;

实现步骤:

1.创建一个新建客户的功能;

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210408/1617867698053_1.png

2. 调整一下属性操作和属性选项卡,如下图所示,其中省市区需要勾选“下拉选择”功能,(关联属性默认是通过查看完整的数据列来选择的,但对于这种数据列少的数据,改成“下拉选择”会更容易操作),此外,市和区属性需要设置筛选条件,即市数据表中关联省的属性必须等于前面选择的省,区属性同理;

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210408/1617867706459_%E5%9B%BE%E7%89%8716.png

3. 后面的步骤使用“预处理”,进行省市区选择的处理;

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210408/1617867711738_%E5%9B%BE%E7%89%8717.png

代码如下:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210408/1617867716529_%E5%9B%BE%E7%89%8718.png

function prepare($programStore, $form, vue) {

    let procedure = "60015faa995dc1097cd8664f";//步骤id

    let p = "600157e7d220df0982a5a1df";//省份字段id

    let s = "600157ee995dc1097cd86632";//市字段id

    let gc = "600157f4995dc1097cd86633";//区字段id

 

    vue.$watch(() => { return programStore.getters["getFormValue"](procedure) },//监控步骤数据

        function (value, oldValue) {

            if (!_.isEqual(value, oldValue)) {//数据改动

 

                if (!value[p] || value[p] != oldValue[p]) {//省份变动

                    value[s] = "";

                    value[gc] = "";

                    programStore.dispatch("set", { procedure, value });

                }

                if (!value[s] || value[s] != oldValue[s]) {//市变动

                    value[gc] = "";

                    programStore.dispatch("set", { procedure, value });

 

                }

            }

        }

    )

}

实现效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210408/1617867738376_%E7%9C%81%E5%B8%82%E5%8C%BA%E9%A2%84%E5%A4%84%E7%90%86.gif


本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
白码小助理
加入白码社区,学习更多开发小技巧!
微信扫码添加白码小助理