一,
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}} </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>