当前位置：首页 > 前端教程

elementui list

2026-03-06 07:38:47前端教程

ElementUI List 组件

ElementUI 提供了 el-table 和 el-list 组件用于展示列表数据。以下是常见用法和功能说明：

基础列表展示

使用 el-table 展示数据列表：

<el-table :data="tableData" 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>

data() {
  return {
    tableData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    }]
  }
}

带分页的列表

结合 el-pagination 实现分页功能：

<el-table :data="tableData">
  <!-- 列定义 -->
</el-table>

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="10"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

可操作列表

添加操作列实现编辑删除等功能：

<el-table-column label="操作" width="180">
  <template slot-scope="scope">
    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

虚拟滚动列表

对于大数据量列表，可使用虚拟滚动提升性能：

<el-table
  :data="tableData"
  height="500"
  row-key="id">
  <!-- 列定义 -->
</el-table>

自定义列表项

使用 el-list 实现更灵活的列表布局：

<el-list :data="listData">
  <template #default="{ item }">
    <div class="list-item">
      <span>{{ item.name }}</span>
      <span>{{ item.value }}</span>
    </div>
  </template>
</el-list>

响应式列表

通过媒体查询实现不同屏幕尺寸下的列表布局：

@media screen and (max-width: 768px) {
  .el-table {
    font-size: 12px;
  }
}

列表排序功能

启用表格排序功能：

<el-table-column
  prop="date"
  label="日期"
  sortable
  width="180">
</el-table-column>

列表筛选功能

添加筛选功能：

<el-table-column
  prop="status"
  label="状态"
  :filters="[{text: '已完成', value: 'done'}, {text: '进行中', value: 'pending'}]"
  :filter-method="filterHandler">
</el-table-column>

以上是 ElementUI 中实现列表功能的常见方法和技巧，可根据实际需求选择合适的方式。

elementui list