设为首页 加入收藏

TOP

vue-Element-axios搭建调用api进行数据展示(二)
2019-09-19 18:10:05 】 浏览:96
Tags:vue-Element-axios 搭建 调用 api 进行 数据 展示
t;
选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title" >选项4</template > <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="list"> <el-table-column prop="datatext" label="日期" width="140"> </el-table-column> <el-table-column prop="version" label="姓名" width="120"> </el-table-column> <el-table-column prop="id" label="地址"> </el-table-column> <el-table-column prop="text" label="描述"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </template> template

css js:

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>

export default {

  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'

    }

    return {
      list: [],
      tableData: Array(20).fill(item)
    }
  },

  created () {
    this.getlist()
  },
  methods: {
    getlist () {
      let _this = this
      _this.$http.get('https://localhost:44314/api/Values').then(res => {
        _this.list = res.data
      })
    }
  }
}
</script>
View Code

数据填充页面

页面:
  <el-main>
        <el-table :data="list">
          <el-table-column prop="datatext" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="version" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="id" label="地址"> </el-table-column>
          <el-table-column prop="text" label="描述"> </el-table-column>
        </el-table>
      </el-main>

 

运行如下

 

首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇nodejs实现聊天机器人 下一篇VUE创建播发器组件并调用

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目