1. 程式人生 > >vue接收介面繫結資料

vue接收介面繫結資料

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結構