使用vue+element将结果显示在一个个的容器内（vue开发三）

说实话，几年来一直做后端的我，突然让做一段时间前端，还感觉蛮新奇的，好像是到了一个新的世界。之前才刚刚学会怎么把后端url请求到的数据显示在前端的表格里。没想到，然后领导就启发，能不能把数据做的再直观一点。。。。。

然后，查了一些资料呗，对哦，是有这么多种形式哈。图表，图在前,表在后啊。于是，我想到，可以把实例一类的数据，显示在一个个的容器内，效果是这样的：

实现步骤呢 ，也很简单，直接使用element的el-tag标签就可以实现了。

具体代码如下（含注释）：

1.html部分

<el-tag
       :key="applcd"
       <!--listdata循环，取每一项item -->
       v-for="item in listData" 
       :disable-transitions="false" >
       <div   style="padding-top:16px;padding-left:16px">
           <el-row  >
             <el-col
              <!--取item中的一项值的方式{{item.该项名称}} -->
             :span="4">{{item.applcd}}-{{item.appln}} </el-col>
           </el-row>
         <el-row >
              <el-col :span="4">ip-{{item.servip}}</el-col>
         </el-row>
       </div>
     </el-tag>

2.样式部分

<style>
//可以根据实际需要进行调整
  .el-tag {
      margin-left: 20px;
      margin-right: 50px;
      margin-bottom: 50px;
      margin-top:20px;
      width: 19vw;
      height: 35vh;
      background: #fff;
  }

</style>

3.data定义

export default {
  data () {
    return {
      listData: []//定义存储数据的数组变量
    }
  }

4.方法说明：

methods:{
    loadData () {
        // 取到路由带过来的参数
        let routerParams = this.$route.query.applcdd
        this.queryParams.applcd = routerParams
        this.queryParams.servip = this.formQuery.servip
            this.queryParams.currentPage = this.currentPage
        this.queryParams.pageSize = this.pageSize
        getServerInstList(this.queryParams)
          .then(res => {
          //将后端取到的数据赋给ListData
            this.listData = res.data.list
            this.total = res.data.total
        })
    }
}

好了，实现以后，是不是觉得逻辑很简单呢~
转载请注明：https://blog.csdn.net/wangjie919/article/details/81840989