vue element实现表格

Vue Element 实现表格的方法

安装 Element UI

确保项目已安装 Vue 和 Element UI。若未安装，可以通过以下命令安装：

npm install element-ui

在 main.js 中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基本表格实现

使用 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: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' }
      ]
    };
  }
};
</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: '张三' },
  { text: '李四', value: '李四' }
]" :filter-method="filterHandler"></el-table-column>

在 methods 中定义筛选方法：

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

表格分页

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

<el-table :data="currentPageData" style="width: 100%">
  <!-- 表格列定义 -->
</el-table>
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length">
</el-pagination>

在 data 和 methods 中定义分页逻辑：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    tableData: [...],
    currentPageData: []
  };
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val;
    this.updateCurrentPageData();
  },
  handleCurrentChange(val) {
    this.currentPage = val;
    this.updateCurrentPageData();
  },
  updateCurrentPageData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    this.currentPageData = this.tableData.slice(start, end);
  }
}

表格行编辑

通过作用域插槽实现行内编辑功能：

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

在 methods 中定义编辑方法：

methods: {
  handleEdit(row) {
    // 编辑逻辑
  }
}

表格多选

通过 type="selection" 实现多选功能：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <!-- 其他列 -->
</el-table>

在 methods 中处理选中项：

methods: {
  handleSelectionChange(val) {
    this.selectedRows = val;
  }
}

表格树形数据

使用 tree-props 和 row-key 实现树形表格：

<el-table
  :data="treeData"
  row-key="id"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  <el-table-column prop="label" label="名称"></el-table-column>
</el-table>

表格自定义样式

通过 header-cell-style 和 cell-style 自定义表格样式：

<el-table
  :data="tableData"
  :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
  :cell-style="{padding: '8px 0'}">
</el-table>