内容管理（五） 01-查询结果布局表格和分页组件的使用

viceen

于 2020-02-14 23:20:54 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏：项目-vue-PC端 vue知识文章标签： vue

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104321676

vue知识同时被 2 个专栏收录

115 篇文章

订阅专栏

项目-vue-PC端

53 篇文章

订阅专栏

本文详细介绍了使用Element UI中的表格组件进行内容管理的方法，包括如何设置表格数据、列属性及宽度，展示了具体代码实例，并涉及分页功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

05-内容管理-查询结果布局

分析：表格

<!-- 表格容器 :data="tableData" [{date:'2018-10-10',name:'',address:''},...] 表格数据   -->
<el-table
      :data="tableData">
      <!-- el-table-column  列组件-->	
      <!-- prop 指定列显示数据（通过字段名称指定） -->
      <!-- label="日期"  当前列数据的描述 -->
      <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>

自己代码：

<!-- 表格 -->
      <el-table :data="articles">
        <el-table-column prop="title" label="标题"></el-table-column>
      </el-table>

// 文章列表数据
 articles: [{ title: '文章标题xxxxx' }, { title: '文章标题xxxxx' }]

分页：

<!-- 分页 -->
      <el-pagination class="pager" background layout="prev, pager, next, total" :total="1000"></el-pagination>

内容管理（五） 01-查询结果布局 表格和分页组件的使用

05-内容管理-查询结果布局

内容管理（五） 01-查询结果布局表格和分页组件的使用