如何為資料行的新增操作按鈕

為了方便操作，有時候需要將功能操作設定在行資料裡，並且能夠透過判斷資料是否符合條件來顯示操作按鈕。

下面教大家怎麼在白碼低程式碼開發平臺上實現透過訂單狀態判斷，已經稽核透過的訂單不顯示修改按鈕。

準備工作：

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>

至此功能已實現。

效果：