vue接收介面繫結資料
阿新 • • 發佈:2018-11-26
data資料設定return值
form設定具體欄位名
data() { return { page: { currPage: 1, list: [], pageSize: 100, totalCount: 1, totalPage: 5, } form: { awardId: 0, drawTime: '', preRoleId: '', preRoleName: '', preZoneId: '', preZoneName: '', regionId: '', regionName: '', roleChangeState: 0, roleChangeTime: '', roleId: '', roleName: '', userLid: '', zoneId: '', zoneName: '' } } },
方法中獲得資料繫結data
//GET this.$axios({ method: 'get', headers: { token: token, }, url: url }).then((resp) => { if (resp.data.code != 0) { alert(resp.data.msg); } else { this.page = resp.data.page; } })
元件中先給el-table繫結data中的page.list對應資料
<el-table :data="page.list" border style="width: 100%" ref="multipleTable">
再給每一條屬性繫結form與list具體物件的對應屬性欄位
<el-table-column prop="regionId" label="環境ID" width="60">
column中需要取出資料時
<template slot-scope="scope">
<el-button size="small" @click="getRoleList(scope.row.userLid)" type="primary"
v-if="scope.row.roleChangeState==0">改綁
</el-button>
<el-button size=" [email protected]="getRoleList(form.userLid)" type="primary"
v-if="scope.row.roleChangeStat:disabled="true">已改綁
</el-button>
</template>
此處應該為if-else結構