场景：

应收列表中，操作列有个收款的功能，但不能一眼看出哪些没收完哪些已收完的，希望那些已经收完款的应收就不再显示收款的功能（可根据收款状态来判断），即不可继续收款的操作；

前期准备：

在白码低代码平台上准备应收表，收款功能；

*示例字段，并非真实用例，收款状态分为：未收款、部分收款、完成收款3种；

实现步骤：

①新增一个数据集；

②数据集新增一个虚拟字段，别名为“操作”，自定义显示设置为“编程”；

③编写单元格样式代码，里面包含了一个点击事件，以及显示性；

<template>
    <div>
    <div class="cell" style="background-color: rgb(0, 206, 187);" v-if="flag" @click.stop="collecte">
        收款
    </div>
    </div>
</template>
<script>
    module.exports = {
    computed:{
        // value 原始值
        // display 显示的值
        // data 当前行的数据
        // field 当前属性
        flag(){
            let state =  this.data["60d58a3642c39e8548a7ec7b"];//收款状态
            return state != "完成收款";//完成收款时不显示按钮
        }
    },
    methods:{
        collecte(){
            this.$cmd({
                type:"program",
                value:{
                    flow:"60d58a509ba2e285470eb30b"//调用应收收款功能，功能id
                }
            },{
                selected:this.data
            });
        }
    }
}
</script>
<style lang="less" scoped>
    .cell {
        margin-left:18px;
        margin-top:5px;
        height: 65%;
        cursor: pointer;
        line-height: 22px;
        color: #fff;
        font-size: 12px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 3px;
        vertical-align: top;
        padding:0 7px;
    }
</style>

效果图：