elementui datatable

ElementUI DataTable 基础用法

ElementUI 的 DataTable 组件（el-table）是一个功能强大的表格组件，支持排序、筛选、分页等多种功能。以下是一个基本示例：

<template>
  <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>
</template>

<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 弄' }
      ]
    }
  }
}
</script>

排序功能

通过设置 sortable 属性可以启用列的排序功能：

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

筛选功能

使用 filters 和 filter-method 属性可以实现筛选功能：

<el-table-column prop="name" label="姓名" :filters="[{text: '王小虎', value: '王小虎'}]" :filter-method="filterHandler"></el-table-column>

在 methods 中添加筛选方法：

filterHandler(value, row) {
  return row.name === value
}

分页功能

结合 el-pagination 组件实现分页：

<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>

自定义列模板

使用 scoped slot 可以自定义列的内容：

<el-table-column label="操作">
  <template #default="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>

多选功能

通过设置 type="selection" 可以启用多选功能：

<el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
</el-table>

树形数据

ElementUI 的表格支持树形数据的展示：

<el-table :data="tableData" row-key="id" border default-expand-all :tree-props="{children: 'children'}">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

固定列

通过设置 fixed 属性可以固定列：

<el-table-column prop="name" label="姓名" width="180" fixed></el-table-column>

响应式设计

ElementUI 的表格会自动适应容器大小，也可以通过设置 fit 属性让列宽自适应：

<el-table :data="tableData" :fit="true">
  <el-table-column prop="date" label="日期"></el-table-column>
</el-table>