表格（Table）

Element-UI 的 Table 组件用于展示多条结构类似的数据，提供丰富的属性、事件和方法，支持排序、筛选、合并单元格、树形数据等功能。

提示

表格（Table）组件官方文档：https://element.eleme.cn/#/zh-CN/component/table (opens new window)

1. 表格组件基本用法

基本语法：在 Vue 组件中使用 <el-table> 标签创建一个表格，表格组件通过 data 属性接收一个对象数组，该数组的每个对象代表表格中的一行数据。el-table-column(列) 的 prop 属性用于指定要显示的列字段。

<template>
    <el-table :data="tableData" stripe border> <!-- 表格带斑马纹和纵向边框 -->
        <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 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ]
    };
  }
};
</script>

• data 绑定：通过 data 属性传入数据，数据需要是一个对象数组。
• 基础功能：通过 prop 属性绑定数据每一列的字段，label 属性设置列名，width 属性设置列宽。

为什么表格中的 `prop` 属性可以直接读取数组中对象的字段?

• prop 属性指定对象的属性名，el-table 组件内部会根据 prop 属性去读取 data 数组中每个对象的对应字段值，然后渲染到表格中。
• 例如，prop="name" 表示读取 data 数组中每个对象的 name 属性值，并显示在表格中对应的列。

Table 属性

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	string/number	—	—
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	string/number	—	—
stripe	是否为斑马纹 table	boolean	—	false
border	是否带有纵向边框	boolean	—	false
size	Table 的尺寸	string	medium / small / mini	—
fit	列的宽度是否自撑开	boolean	—	true
show-header	是否显示表头	boolean	—	true
highlight-current-row	是否要高亮当前行	boolean	—	false
highlight-selection-row	是否要高亮复选框选中行（仅针对开启 selection 有效）	boolean	—	false
current-row-key	当前行的 key，只写属性	String,Number	—	—
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String	—	—
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex})/Object	—	—
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—	—
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	—	—
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	Function({row, rowIndex})/String	—	—
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex})/Object	—	—
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—	—
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	—	—
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。	Function(row)/String	—	—
empty-text	空数据时显示的文本内容，也可以通过 slot="empty" 设置	String	—	暂无数据
default-expand-all	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	Boolean	—	false
expand-row-keys	可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。	Array	—	—
default-sort	默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序	Object	order: ascending, descending	—
tooltip-effect	tooltip effect 属性	String	dark/light	—
show-summary	是否在表尾显示合计行	Boolean	—	false
sum-text	合计行第一列的文本	String	—	合计
summary-method	自定义的合计计算方法	Function({ columns, data })	—	—
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	—	—
select-on-indeterminate	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行	Boolean	—	true
indent	展示树形数据时，树节点的缩进	Number	—	16
lazy	是否懒加载子节点数据	Boolean	—	—
load	加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息	Function(row, treeNode, resolve)	—	—
tree-props	渲染嵌套数据的配置选项	Object	—	{ hasChildren: 'hasChildren', children: 'children' }

Table 事件

事件名	说明	回调参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event
row-dblclick	当某一行被双击时会触发该事件	row, column, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
filter-change	当表格的筛选条件发生变化的时候会触发该事件	filters
current-change	当表格的当前行发生变化的时候会触发该事件	currentRow, oldCurrentRow
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
expand-change	当用户对某一行展开或者关闭的时候会触发该事件	row, expandedRows

Table 方法

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	—
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态。如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
clearSort	用于清空排序条件，数据会恢复成未排序的状态	—
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件	columnKey
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	—
sort	手动对 Table 进行排序。参数 prop 属性指定排序列，order 指定排序顺序	prop: string, order: string

Table 插槽

name	说明
append	插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。

Table-column(列) 属性

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand	—
index	如果设置了 type=index，可以通过传递 index 属性来自定义索引	number, Function(index)	—	—
column-key	column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件	string	—	—
label	显示的标题	string	—	—
prop	对应列内容的字段名，也可以使用 property 属性	string	—	—
width	对应列的宽度	string	—	—
min-width	对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列	string	—	—
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	string, boolean	true, left, right	—
render-header	列标题 Label 区域渲染使用的 Function	Function(h, { column, $index })	—	—
sortable	对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	boolean, string	true, false, 'custom'	false
sort-method	对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致	Function(a, b)	—	—
sort-by	指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推	String/Array/Function(row, index)	—	—
sort-orders	数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序	array	ascending/descending/null	['ascending', 'descending', null]
resizable	对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）	boolean	—	true
formatter	用来格式化内容	Function(row, column, cellValue, index)	—	—
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	Boolean	—	false
align	对齐方式	String	left/center/right	left
header-align	表头对齐方式，若不设置该项，则使用表格的对齐方式	String	left/center/right	—
class-name	列的 className	string	—	—
label-class-name	当前列标题的自定义类名	string	—	—
selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选	Function(row, index)	—	—
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）	Boolean	—	false
filters	数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。	Array[{ text, value }]	—	—
filter-placement	过滤弹出框的定位	String	与 Tooltip 的 placement 属性相同	—
filter-multiple	数据过滤的选项是否多选	Boolean	—	true
filter-method	数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。	Function(value, row, column)	—	—
filtered-value	选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。	Array	—	—

Table-column(列) 作用域插槽

name	说明
—	自定义列的内容，参数为 { row, column, $index }
header	自定义表头的内容. 参数为 { column, $index }

作用域插槽

• 插槽名称：默认为空 (意味着不需要显式指定插槽名称，直接v-slot="scope"接收插槽提供的数据)
• 使用场景：适用于需要在表格的单元格中自定义内容，例如添加按钮、图标等。
• 暴露的参数：{ row, column, $index }
  • row：当前行的数据对象。可以通过该参数访问当前行的所有字段值。
  • column：当前列的配置对象。可以通过该参数访问列的相关属性，如 prop、label 等。
  • $index：当前行的索引（从 0 开始）。可以通过该参数获取当前行在表格中的位置。

如何调用 API？

• scope.row：访问当前行的数据对象。
• scope.column：访问当前列的配置对象。
• scope.$index：获取当前行的索引。

具名作用域插槽

• 插槽名称：header (意味着需要显式指定插槽名称，使用v-slot:header="scope"接收插槽提供的数据)
• 使用场景：适用于需要在表头中自定义内容，例如添加图标、工具提示等。
• 暴露的参数：{ column, $index }
  • column：当前列的配置对象。可以通过该参数访问列的相关属性，如 prop、label 等。
  • $index：当前列的索引（从 0 开始）。可以通过该参数获取当前列在表格中的位置。

如何调用 API？

• scope.column：访问当前列的配置对象。
• scope.$index：获取当前列的索引。

2. 单选和多选事件

单选事件(current-change)

current-change 事件在表格的当前行发生变化时触发。它用于处理用户选择单行数据的场景。

使用场景

1. 用户点击某一行时，高亮显示并展示详细信息。
2. 根据用户选择的行进行其他操作，例如编辑、查看详情等。

参数说明

• currentRow：当前选中的行数据对象。
• oldCurrentRow：之前选中的行数据对象。

当用户点击某一行时，handleCurrentChange 方法会被触发，并更新 selectedRow 变量，其他地方可以通过 selectedRow 变量访问当前选中的行数据，并进行相应的操作。

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" @current-change="handleCurrentChange" highlight-current-row>
      <!-- 日期列 -->
      <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>

    <!-- 选中行数据展示 -->
    <div v-if="selectedRow">
      <p>选中行数据：</p>
      <p>日期: {{ selectedRow.date }}</p>
      <p>姓名: {{ selectedRow.name }}</p>
      <p>地址: {{ selectedRow.address }}</p>
    </div>
  </div>
</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 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ],
      selectedRow: null // 用于存储当前选中的行数据
    };
  },
  methods: {
    // 处理当前行变化事件
    handleCurrentChange(currentRow, oldCurrentRow) {
      this.selectedRow = currentRow; // 更新选中的行数据
      console.log('当前选中的行:', currentRow); // 打印当前选中的行数据
    }
  }
};
</script>

单选实现删除和编辑操作 (同步数据库)

可以使用这个方法实现删除和编辑操作，通过 current-change 事件获取当前选中的行数据，然后通过按钮触发编辑和删除操作。

1. 获取当前选中行数据：通过 current-change 事件获取当前选中的行数据，并存储在 selectedRow 变量中。

2. 编辑操作：点击编辑按钮时，将当前选中的行数据加载到编辑表单中，用户修改后提交。

3. 删除操作：点击删除按钮时，发送请求到后端删除当前选中的行数据，并从表格中移除。

提示

这种方式适合删除和编辑按钮不在表格内。

<template>
  <div>
    <!-- 删除和编辑按钮 -->
    <el-button type="primary" @click="editSelectedRow" :disabled="!selectedRow">
      编辑选中行
    </el-button>
    <el-button type="danger" @click="deleteSelectedRow" :disabled="!selectedRow">
      删除选中行
    </el-button>
    
    <!-- 表格 -->
    <el-table :data="tableData" @current-change="handleCurrentChange" highlight-current-row>
      <!-- 日期列 -->
      <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-dialog title="编辑行数据" :visible.sync="dialogVisible">
      <el-form :model="editForm">
        <el-form-item label="日期">
          <el-input v-model="editForm.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

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 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ],
      selectedRow: null, // 用于存储当前选中的行数据
      dialogVisible: false, // 控制编辑模态框的显示
      editForm: {
        date: '',
        name: '',
        address: ''
      }
    };
  },
  methods: {
    // 处理当前行变化事件
    handleCurrentChange(currentRow, oldCurrentRow) {
      this.selectedRow = currentRow; // 更新选中的行数据
      console.log('当前选中的行:', currentRow); // 打印当前选中的行数据
    },
    // 编辑选中的行
    editSelectedRow() {
      if (this.selectedRow) {
        // 将当前选中的行数据加载到编辑表单中
        this.editForm = { ...this.selectedRow };
        this.dialogVisible = true; // 显示编辑模态框
      }
    },
    // 提交编辑表单
    submitEditForm() {
      // 发送编辑请求到后端
      axios.post('/api/edit', this.editForm)
        .then(response => {
          // 更新表格数据
          const index = this.tableData.findIndex(row => row.date === this.editForm.date);
          if (index !== -1) {
            this.$set(this.tableData, index, { ...this.editForm });
          }
          this.dialogVisible = false; // 关闭编辑模态框
          this.selectedRow = null; // 清空选中的行数据
        })
        .catch(error => {
          console.error('编辑失败:', error);
        });
    },
    // 删除选中的行
    deleteSelectedRow() {
      if (this.selectedRow) {
        // 发送删除请求到后端
        axios.post('/api/delete', { date: this.selectedRow.date })
          .then(response => {
            // 从表格中移除选中的行
            this.tableData = this.tableData.filter(row => row.date !== this.selectedRow.date);
            this.selectedRow = null; // 清空选中的行数据
          })
          .catch(error => {
            console.error('删除失败:', error);
          });
      }
    }
  }
};
</script>

多选事件 (selection-change)

在使用多选表格时，selection-change 事件用于捕捉用户选择多行数据时的变化。该事件会在用户勾选或取消勾选行时触发，通过回调函数接收当前选中的所有行数据对象数组。

使用场景

1. 数据批量操作：例如批量删除、批量更新等场景，用户可以选择多行数据进行操作。
2. 数据统计：可以根据用户选择的多行数据进行统计分析。
3. 权限控制：根据用户选择的行来判断用户的操作权限。

参数说明：通过 @selection-change 事件监听用户的多行选择变化，其绑定的事件中接收一个参数selection，selection中保存了当前选中的行数据对象数组。

<template>
  <div>
    <!-- 表格定义，数据绑定和多选事件处理 -->
    <el-table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable">
      <!-- 多选框列 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 日期列 -->
      <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>
    
    <!-- 显示选中的行数据 -->
    <div v-if="selectedRows.length">
      <p>选中行数据：</p>
      <ul>
        <li v-for="row in selectedRows" :key="row.date">
          日期: {{ row.date }}，姓名: {{ row.name }}，地址: {{ row.address }}
        </li>
      </ul>
    </div>
  </div>
</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 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ],
      // 选中行数据
      selectedRows: []
    };
  },
  methods: {
    // 处理选择变化事件
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log('选中的行:', selection);
    }
  }
};
</script>

多选实现批量删除功能 (同步数据库)

通过 selection-change 事件获取选中的行数据后，可以将其存储到绑定的变量中（例如 selectedRows）。这样，其他地方就可以对选中的数据进行操作。

例如，在批量删除功能中，可以使用 selectedRows 中的数据来进行批量删除操作：

• type="selection"：在 el-table-column 中设置 type 为 selection，即可实现多选功能。
• @selection-change：监听表格的多选框变化，更新选中行的数据。
• deleteSelectedRows：实现批量删除功能，将选中的行数据的 ID 发送到后端进行删除。

<template>
  <div>
    <!-- 删除选中行按钮 -->
    <el-button type="danger" @click="deleteSelectedRows" :disabled="selectedRows.length === 0">
      删除选中行
    </el-button>
    
    <!-- 表格 -->
    <el-table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable">
      <el-table-column type="selection" width="55"></el-table-column>
      <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>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [
        { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { id: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { id: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { id: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ],
      selectedRows: [] // 用于存储当前选中的多行数据
    };
  },
  methods: {
    // 处理选择变化事件
    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新选中的行数据
    },
    // 删除选中的行
    async deleteSelectedRows() {
      const ids = this.selectedRows.map(row => row.id); // 获取选中行的ID数组
      try {
        // 发送删除请求到后端
        await axios.post('/api/deleteRows', { ids });
        // 删除成功后更新前端数据
        this.tableData = this.tableData.filter(row => !ids.includes(row.id));
        this.$refs.multipleTable.clearSelection(); // 清空表格的选择状态
        this.selectedRows = []; // 清空选中的行数据
        this.$message.success('删除成功');
      } catch (error) {
        this.$message.error('删除失败');
      }
    }
  }
};
</script>

在上面这个示例中，我添加了一个删除按钮。点击删除按钮后，会发送删除请求到后端，请求成功以后前端删除选中的行数据，并更新表格数据。使用 filter 方法将未选中的数据保留在 tableData 中，并通过表格的 clearSelection 方法清空选择状态。

3. 数据的增删查改 (同步数据库)

1. 增加数据行

通过向 tableData 数组中添加新对象实现增加数据行的功能。

<template>
  <div>
    <!-- 添加行按钮，点击后显示添加行的表单 -->
    <el-button type="primary" @click="dialogVisible = true">添加行</el-button>

    <!-- 添加行的表单模态框 -->
    <el-dialog title="添加行数据" :visible.sync="dialogVisible">
      <el-form :model="newRow">
        <el-form-item label="日期">
          <el-input v-model="newRow.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newRow.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newRow.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNewRow">提交</el-button>
      </div>
    </el-dialog>

    <!-- 表格 -->
    <el-table :data="tableData">
      <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>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible: false, // 控制添加行表单的显示
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ],
      newRow: {
        date: '',
        name: '',
        address: ''
      } // 用于存储新行的数据
    };
  },
  methods: {
    // 提交新行数据
    submitNewRow() {
      // 使用 axios 库发送 POST 请求到后端 API
      axios.post('/api/add', this.newRow)
        .then(response => {
          // 请求成功后，将新行数据添加到表格数据中
          this.tableData.push({ ...this.newRow });
          // 清空新行数据表单
          this.newRow = {
            date: '',
            name: '',
            address: ''
          };
          // 隐藏添加行表单
          this.dialogVisible = false;
          console.log('添加新行:', response.data);
        })
        .catch(error => {
          // 处理请求错误
          console.error('添加新行失败:', error);
        });
    }
  }
};
</script>

<style scoped>
/* 添加必要的样式 */
.dialog-footer {
  text-align: right;
}
</style>

2. 删除数据行

Element-ui提供了插槽可以去获取当前行的索引和当前行的内容，通过scope接收一个包含了当前行的索引对象；

然后利用索引从 tableData 数组中移除对象实现删除数据行的功能。【适用于删除按钮和数据在同一行】

<template>
  <div>
    <el-table :data="tableData">
      <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-column label="操作">
        <template v-slot="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

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 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ]
    };
  },
  methods: {
    // 处理删除操作
    handleDelete(index, row) {
      // 发送 DELETE 请求到后端 API
      axios.delete(`/api/delete/${row.id}`)
        .then(response => {
          // 请求成功后，从 tableData 中移除对应的数据行
          this.tableData.splice(index, 1);
          console.log('删除行:', response.data);
        })
        .catch(error => {
          // 处理请求错误
          console.error('删除行失败:', error);
        });
    }
  }
};
</script>

splice() 方法

splice() 方法是 JavaScript 数组的一个方法，用于添加、删除或替换数组中的元素。该方法会直接修改原数组，并返回一个包含被删除元素的新数组。语法格式如下：

array.splice(start, deleteCount, item1, item2, ...)

• start：指定修改开始的位置（从 0 开始索引）。
• deleteCount：表示要删除的元素数量。
• item1, item2, ...：可选，表示要添加到数组中的新元素。

3. 查询数据行

查询数据行需要通过前端发送查询条件到后端，后端返回符合条件的数据。前端使用 axios 库发送 GET 请求来实现数据的查询。

<template>
  <div>
    <!-- 输入框，用于输入查询条件 -->
    <el-input v-model="search" placeholder="搜索姓名" @input="fetchFilteredData"></el-input>
    
    <!-- 表格组件，展示数据 -->
    <el-table :data="tableData">
      <!-- 日期列 -->
      <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>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      search: '', // 用于存储搜索条件
      tableData: [] // 用于存储从后端获取的查询结果
    };
  },
  mounted() {
    // 初始加载数据
    this.fetchFilteredData();
  },
  methods: {
    // 向后端发送请求，获取过滤后的数据
    fetchFilteredData() {
      // 发起 GET 请求，请求参数为搜索条件
      axios.get('/api/search', {
        params: {
          name: this.search
        }
      })
      .then(response => {
        // 更新表格数据为后端返回的查询结果
        this.tableData = response.data;
        console.log('查询结果:', this.tableData);
      })
      .catch(error => {
        // 处理请求错误
        console.error('查询失败:', error);
      });
    }
  }
};
</script>

4. 修改数据行

通过更新 tableData 数组中的对象实现修改数据行的功能。【适用于编辑按钮和数据在同一行】

<template>
  <div>
    <!-- 表格组件，展示数据 -->
    <el-table :data="tableData">
      <!-- 日期列 -->
      <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-column label="操作">
        <!-- 自定义列内容插槽 -->
        <template v-slot="scope">
          <!-- 编辑按钮，点击触发编辑事件 -->
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑行" :visible.sync="dialogVisible" @before-close="handleDialogClose">
      <el-form :model="editForm">
        <!-- 日期输入框 -->
        <el-form-item label="日期">
          <el-input v-model="editForm.date"></el-input>
        </el-form-item>
        <!-- 姓名输入框 -->
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <!-- 地址输入框 -->
        <el-form-item label="地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的底部按钮 -->
      <div slot="footer">
        <!-- 取消按钮 -->
        <el-button @click="handleDialogClose">取消</el-button>
        <!-- 保存按钮，点击保存修改后的数据 -->
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible: false, // 控制编辑对话框的显示与隐藏
      editIndex: -1, // 当前编辑行的索引
      editForm: {}, // 用于编辑的表单数据
      tableData: [
        { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { id: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { id: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { id: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1520 弄' }
      ]
    };
  },
  methods: {
    // 打开编辑对话框
    handleEdit(index, row) {
      this.editIndex = index; // 记录当前编辑行的索引
      this.editForm = { ...row }; // 使用扩展运算符将当前行的数据复制到编辑表单中
      this.dialogVisible = true; // 显示编辑对话框
    },
    // 保存编辑后的数据并同步到后端
    saveEdit() {
      if (this.editIndex !== -1) {
        // 发送 PUT 请求，将修改后的数据同步到后端
        axios.put(`/api/update/${this.editForm.id}`, this.editForm)
          .then(response => {
            // 更新前端的表格数据
            this.$set(this.tableData, this.editIndex, this.editForm);
            console.log('保存编辑:', response.data);
            this.handleDialogClose(); // 关闭对话框并清空表单数据
          })
          .catch(error => {
            console.error('保存编辑失败:', error);
          });
      }
    },
    // 关闭对话框并清空表单数据
    handleDialogClose() {
      this.dialogVisible = false; // 关闭对话框
      this.editForm = {}; // 清空表单数据
      this.editIndex = -1; // 重置编辑索引
    }
  }
};
</script>

参数说明

• handleEdit(index, row)：
  • index：要编辑的行的索引。
  • row：要编辑的行的数据对象。
• saveEdit()：将编辑后的数据保存到 tableData 数组中。

3. 常用表格组件示例

1. 基础表格

这个示例展示了最基础的表格结构，只需要设置 data 属性来提供表格的数据。

• data：表格的数据源，是一个数组对象。
• el-table-column：用于定义表格中的列，通过 prop 属性指定列对应的字段。

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
      ]
    };
  }
};
</script>

2. 带有斑马纹和边框的表格

通过设置 stripe 和 border 属性，表格将展示为带有斑马纹的样式，并添加纵向边框。

• stripe：开启表格的斑马纹效果，使得相邻两行的背景色不同。
• border：为表格添加纵向边框，使表格更为清晰。

<template>
  <el-table :data="tableData" stripe border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
      ]
    };
  }
};
</script>

3. 多选表格

多选表格通过添加一个新列 el-table-column ，将该列的 type 属性为 selection，就可以在每行前面添加一个复选框。

• type="selection"：在 el-table-column 中设置 type 为 selection，即可实现多选功能。
• @selection-change：监听表格的多选框变化，更新选中行的数据。
• handleBatchDelete：实现批量删除功能，将选中的行数据的 ID 发送到后端进行删除。

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;">
      <el-button type="primary" @click="handleBatchDelete">批量删除</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 30, address: '深圳市南山区' }
      ],
      selectedRows: [] // 存储用户选择的行数据
    };
  },
  methods: {
    // 处理多选框的变化
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    // 处理批量删除
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的项');
        return;
      }

      this.$confirm('此操作将永久删除选中的记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedRows.map(row => row.id);
        axios.post('/api/batch-delete', { ids })
          .then(() => {
            this.$message.success('批量删除成功');
            this.loadData(); // 重新加载数据
          })
          .catch(error => {
            console.error('批量删除失败:', error);
            this.$message.error('批量删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 处理单行编辑
    handleEdit(row) {
      console.log('编辑:', row);
    },
    // 处理单行删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/api/data/${id}`)
          .then(() => {
            this.$message.success('删除成功');
            this.loadData(); // 重新加载数据
          })
          .catch(error => {
            console.error('删除失败:', error);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 模拟加载数据
    loadData() {
      this.tableData = [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 30, address: '深圳市南山区' }
      ];
    }
  },
  created() {
    this.loadData(); // 初始化加载数据
  }
};
</script>

<style scoped>
/* 样式根据需要进行调整 */
</style>

4. 带有固定列的表格

通过设置 fixed 属性，可以固定表格的某些列，常用于数据列较多时保持重要列的可见性。

• fixed="left"：将左侧的 ID 列固定。
• fixed="right"：将右侧的操作列固定，以便用户始终可以看到这些列。

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80" fixed="left"></el-table-column>
    <el-table-column prop="name" label="名称" width="120"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    <el-table-column prop="address" label="地址" width="200"></el-table-column>
    <el-table-column prop="email" label="邮箱" width="250"></el-table-column>
    <el-table-column prop="phone" label="电话" width="150"></el-table-column>
    <el-table-column prop="company" label="公司" width="200"></el-table-column>
    <el-table-column label="操作" width="150" fixed="right">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区', email: 'zhangsan@example.com', phone: '1234567890', company: 'A公司' },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区', email: 'lisi@example.com', phone: '0987654321', company: 'B公司' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区', email: 'wangwu@example.com', phone: '1122334455', company: 'C公司' },
      ]
    };
  },
  methods: {
    handleEdit(row) {
      console.log('编辑:', row);
    },
    handleDelete(id) {
      console.log('删除:', id);
    }
  }
};
</script>

5. 带有合计行的表格

使用 show-summary 和 summary-method 属性可以为表格添加一个合计行，通常用于计算数值型数据的总和或平均值。

• show-summary：开启合计行显示。
• summary-method：自定义合计行的计算逻辑，此方法接收列和数据作为参数。

<template>
  <el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
      ]
    };
  },
  methods: {
    getSummaries({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => prev + curr, 0);
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    }
  }
};
</script>

6. 树形数据表格

通过设置 row-key 和 tree-props 属性，表格可以展示层级结构的数据，常用于显示分类或嵌套数据。

• row-key：每行数据的唯一标识，用于渲染和优化。
• tree-props：配置树形数据的子节点字段 children 和是否有子节点的标识 hasChildren。

<template>
  <el-table :data="tableData" border row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 28,
          address: '北京市朝阳区',
          children: [
            { id: 4, name: '张三的子项1', age: 10, address: '北京市朝阳区' },
            { id: 5, name: '张三的子项2', age: 12, address: '北京市朝阳区' }
          ]
        },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
      ]
    };
  }
};
</script>

6. 带有动态数据的表格

加载的懒加载树形表格，通过设置 lazy 和 load 属性，可以实现树形表格的懒加载功能，适合数据量较大的场景。

• lazy：开启懒加载模式。
• load：自定义加载子节点数据的方法。

<template>
  <el-table :data="tableData" border row-key="id" lazy :load="loadData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区', hasChildren: true },
        { id: 2, name: '李四', age: 34, address: '上海市浦东新区', hasChildren: true },
        { id: 3, name: '王五', age: 45, address: '广州市天河区' },
      ]
    };
  },
  methods: {
    loadData(treeNode, resolve) {
      setTimeout(() => {
        resolve([
          { id: 4, name: '子项1', age: 10, address: '北京市朝阳区' },
          { id: 5, name: '子项2', age: 12, address: '北京市朝阳区' }
        ]);
      }, 1000);
    }
  }
};
</script>