vue根据后台接口判断有数据禁止编辑

一，

   html

<table id="table" class="table_binding" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <th class="borderright borderbottom">标准编号</th>
                    <th class="borderright borderbottom">ID</th>
                    <th class="borderright borderbottom">标准名称</th>
                    <th class="borderright borderbottom">关联项</th>
                    <th class="borderright borderbottom">数据状态</th>
                    <th class="borderright borderbottom">操作</th>
                </tr>
                <tr v-for="(count,index) in coutData.data" :key="index" :item="count">
                    <td class="borderright borderbottom">{{count.standard_number}}</td>
                    <td class="borderright borderbottom">{{count.standard_id}}</td>
                    <td class="borderright borderbottom">{{count.standard_name}}</td>
                    <td class="borderright borderbottom">
                        <span v-for="(item,index) in count.item_list">{{item.item_name}}&nbsp;&nbsp;</span>
                    </td>
                    <td class="borderright borderbottom">{{count.standard_status==1?"正常":"锁定"}}</td>
                    <td class="borderright borderbottom">
                        <button>查看</button>
                        <button @click="showCboxID(count.standard_id,count)" :class="{statusbtn:count.item_list.length!=0}">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>

二，

  script

<script>
    export default {
        name: 'count',
        data() {
            return {
                thisId: '',
                coutData: {
                    "count": 88,
                   // 定义数据
                    "data": [{
                            "standard_number": "cs044",
                            "standard_id": "12",
                            "standard_name": "cs022",
                            "standard_status": '1',
                            "item_list": [{
                                "item_name": "123"
                            }, {
                                "item_name": "13"
                            }, {
                                "item_name": "1"
                            }]
                        },
                        {
                            "standard_number": "cs044",
                            "standard_id": "44",
                            "standard_name": "cs022",
                            "standard_status": '2',
                            "item_list": []
                        },
                        {
                            "standard_number": "cs044",
                            "standard_id": "37",
                            "standard_name": "cs022",
                            "standard_status": '1',
                            "item_list": []
                        }
                    ]
                }
            }
        },
        components: {

        },
        mounted() {
            console.log(this.coutData)
            this.getData();
        },
        methods: {
            getData() {
                //                console.log(this.coutData)
                this.coutData.count = Number(this.coutData.count);
                this.coutData.data.forEach((item, index) => {
                    this.coutDataa = item.item_list;
                })
            },
            showCboxID(id, count) {
                console.log(count);
//                允许点击的时候判断访问接口
                if(count.item_list.length == 0) {
                   
                }

            }
        }
    }
</script>

三，css

    

<style scoped lang="scss">
    @import '../../assets/css/index.scss';
    #table {
        margin:100px auto;
        tr {
            line-height:30px;
            
            td.borderright.borderbottom {
                padding:10px 13px;
                button {
                    background: #FFFFFF;
                }
                button.statusbtn {
                    color: #CCCCCC;
                    cursor: not-allowed
                }
            }
        }
    }
</style>

 

转载于:https://www.cnblogs.com/liujiajiablog/p/9768175.html