elementui tabledata

ElementUI Table Data 使用指南

基本用法

ElementUI 的表格组件 el-table 通过 data 属性绑定数据源。数据格式通常为数组，数组中的每个对象代表一行数据，对象的属性对应表格的列。

<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: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' }
      ]
    }
  }
}
</script>

动态加载数据

可以通过异步请求（如 axios）动态加载数据并更新 tableData。

methods: {
  fetchData() {
    axios.get('/api/data').then(response => {
      this.tableData = response.data
    })
  }
},
created() {
  this.fetchData()
}

表格排序与筛选

ElementUI 表格支持通过 sortable 和 filters 实现排序和筛选功能。

<el-table-column 
  prop="date" 
  label="日期" 
  sortable 
  :filters="[{ text: '北京', value: '北京市' }, { text: '上海', value: '上海市' }]"
  :filter-method="filterHandler">
</el-table-column>

methods: {
  filterHandler(value, row, column) {
    return row.address === value
  }
}

分页功能

结合 el-pagination 实现分页，通过 current-page 和 page-size 控制分页逻辑。

<el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="total">
</el-pagination>

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }
},
methods: {
  handlePageChange(page) {
    this.currentPage = page
    this.fetchData()
  }
}

自定义列模板

通过 slot-scope 自定义列内容，例如添加操作按钮或格式化数据。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
    <el-button @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

数据更新与响应式

直接修改 tableData 或使用 Vue.set 确保数据变化触发视图更新。

methods: {
  addRow() {
    this.tableData.push({ date: '2023-01-04', name: '赵六', address: '深圳市' })
  }
}