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

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

下面教大家怎么在白码低代码开发平台上实现通过订单状态判断，已经审核通过的订单不显示修改按钮。

准备工作：

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>

至此功能已实现。

效果：