Vue+element 列表渲染

最新推荐文章于 2024-07-11 10:44:44 发布

爱在冰川了

最新推荐文章于 2024-07-11 10:44:44 发布

阅读量166

点赞数

分类专栏：笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/T8682828/article/details/127010363

版权

Vue.js el-table 数据绑定前端开发表格展示

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

第一步：写模版：data='自己请求的数据' prop='数据里的属性'

<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

第二步：请求数据（本文是本内地写的数据）

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>