vue接收接口绑定数据

最新推荐文章于 2024-05-04 22:33:06 发布

暮色恍然

最新推荐文章于 2024-05-04 22:33:06 发布

阅读量4k

点赞数

分类专栏：前端工作经验笔记文章标签： vue 数据绑定

本文链接：https://blog.csdn.net/qq_24516549/article/details/84455480

版权

前端工作经验笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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="s@click="getRoleList(form.userLid)" type="primary"
                   v-if="scope.row.roleChangeStat:disabled="true">已改绑
        </el-button>
    </template>

此处应该为if-else结构