如何为数据行添加操作按钮
Roy
• 发表于:2021-03-23 16:25:22 • 更新于:2021-10-12 15:52:25
404

为了方便操作,有时候需要将功能操作设置在行数据里,并且能够通过判断数据是否符合条件来显示操作按钮。

下面教大家怎么实现通过订单状态判断,已经审核通过的订单不显示修改按钮。

准备工作:

1、订单数据表,包含状态字段,同时准备几条数据

如何为数据行添加操作按钮

2、修改订单功能

如何为数据行添加操作按钮

实现步骤:

1、创建一个订单列表数据集,注意模板必须选择“集合beta”。

如何为数据行添加操作按钮

2、进入数据集流程编辑页,打开“显示-集合-订单”步骤的设置

如何为数据行添加操作按钮

3、点击“添加属性”按钮添加一个属性,并将该属性移至合适位置,“别名”设置为“操作”,“自定义显示”设置为“编程”。

如何为数据行添加操作按钮

4、点开“自定义显示-编程”的“编辑代码”。调整class为“cell”的div元素及其css样式

如何为数据行添加操作按钮

如何为数据行添加操作按钮

效果:

如何为数据行添加操作按钮

5、添加v-if 判断状态显示

如何为数据行添加操作按钮

效果:

如何为数据行添加操作按钮

6、调用修改订单的功能

如何为数据行添加操作按钮

如何为数据行添加操作按钮

完整代码:

<template>

    <div class="cell bm-cell" v-if="status" @click="updateOrder">修改</div>

</template>

<script>

    module.exports = {

    methods:{

        updateOrder(){

            //调用功能:修改订单

            this.$$cmd({

                type:"program",//固定值 program

                    value:{

                        flow:"604b0435ae2f6850134b64e1",//功能id

                        data:{//功能数据

                            "604b0435ae2f6850134b64e3":this.data,//步骤id:选择订单

                         },

                        skip:false,//true:不显示弹窗,直接在后台运行

                }

             });

        },

            

    },  

    computed:{

        // value 原始值

        // display 显示的值

        // data 当前行的数据

        // field 当前属性

        

        status(){

            //状态为待审的数据才显示按钮

            let status=this.data["604aee864630735012fabef0"];//订单状态

            return status=="待审";

        },

    },

}

</script>

<style lang="less" scoped>

    .cell {//默认cell的height为100%

        &.bm-cell {

            position: absolute;

            padding: 0px 14px;

            height: 32px;

            background: #00CEBB;

            border-radius: 3px;

            font-size: 16px;

            font-weight: 400;

            color: #FFFFFF;

            text-align: center;

            top: 5px;

            left: 20px;

            cursor:pointer;

        }

 

    }

</style>

 

至此功能已实现。

效果:

如何为数据行添加操作按钮


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