el-table详解

笨鸟先死
1,185 阅读6分钟

el-table 是 Element Plus 框架中的一个表格组件，用于展示结构化数据。它可以支持排序、筛选、分页等多种功能，适用于多种数据展示场景。

一。 el-table 属性详解

  1. data:

    • 类型: Array
    • 用途: 表格的数据源。
    • 默认值: []

  2. stripe:

    • 类型: Boolean
    • 用途: 是否为斑马条纹表。
    • 默认值: false

  3. border:

    • 类型: Boolean
    • 用途: 是否带有纵向边框。
    • 默认值: false

  4. size:

    • 类型: String
    • 用途: 表格尺寸，可选值为 medium、small、mini。

  5. fit:

    • 类型: Boolean
    • 用途: 列的宽度是否自撑开。
    • 默认值: true

  6. show-header:

    • 类型: Boolean
    • 用途: 是否显示表头。
    • 默认值: true

  7. highlight-current-row:

    • 类型: Boolean
    • 用途: 是否要高亮当前行。
    • 默认值: false

  8. height:

    • 类型: Number | String
    • 用途: 表格的高度。

  9. max-height:

    • 类型: Number | String
    • 用途: 表格的最大高度。

  10. row-key:

    • 类型: Function | String
    • 用途: 行数据的 Key，用来优化渲染。

  11. row-class-name:

    • 类型: Function | String
    • 用途: 行的 className。

  12. header-row-class-name:

    • 类型: Function | String
    • 用途: 表头行的 className。

  13. cell-class-name:

    • 类型: Function | String
    • 用途: 单元格的 className。

  14. header-cell-class-name:

    • 类型: Function | String
    • 用途: 表头单元格的 className。

  15. row-style:

    • 类型: Function | Object
    • 用途: 行的样式。

  16. header-row-style:

    • 类型: Function | Object
    • 用途: 表头行的样式。

  17. cell-style:

    • 类型: Function | Object
    • 用途: 单元格的样式。

  18. header-cell-style:

    • 类型: Function | Object
    • 用途: 表头单元格的样式。

  19. show-summary:

    • 类型: Boolean
    • 用途: 是否显示合计行。
    • 默认值: false

  20. sum-text:

    • 类型: String
    • 用途: 合计行的第一列文本。
    • 默认值: 合计

  21. summary-method:

    • 类型: Function
    • 用途: 自定义合计行计算方法。

  22. span-method:

    • 类型: Function
    • 用途: 合并单元格的方法。

  23. select-on-indeterminate:

    • 类型: Boolean
    • 用途: 在多选表格中，是否默认选中所有未被禁用的选项。
    • 默认值: true

  24. tree-props:

    • 类型: Object
    • 用途: 表格的树形数据属性配置。
    • 默认值: { hasChildren: 'hasChildren', children: 'children' }

  25. lazy:

    • 类型: Boolean
    • 用途: 是否懒加载子节点数据。
    • 默认值: false

  26. load:

    • 类型: Function
    • 用途: 加载子节点数据的方法。

二。 el-table 事件详解

  1. select:

    • 类型: Function
    • 用途: 当用户手动勾选数据行的 Checkbox 时触发的事件。
    • 参数: selection, row

  2. select-all:

    • 类型: Function
    • 用途: 当用户手动勾选全选 Checkbox 时触发的事件。
    • 参数: selection

  3. selection-change:

    • 类型: Function
    • 用途: 当选择项发生变化时触发的事件。
    • 参数: selection

  4. cell-mouse-enter:

    • 类型: Function
    • 用途: 当单元格 hover 时会触发该事件。
    • 参数: row, column, cell, event

  5. cell-mouse-leave:

    • 类型: Function
    • 用途: 当单元格 mouse leave 时会触发该事件。
    • 参数: row, column, cell, event

  6. cell-click:

    • 类型: Function
    • 用途: 当某个单元格被点击时会触发该事件。
    • 参数: row, column, cell, event

  7. cell-dblclick:

    • 类型: Function
    • 用途: 当某个单元格被双击击时会触发该事件。
    • 参数: row, column, cell, event

  8. row-click:

    • 类型: Function
    • 用途: 当某一行被点击时会触发该事件。
    • 参数: row, event, column

  9. row-contextmenu:

    • 类型: Function
    • 用途: 当某一列被鼠标右键点击时触发该事件。
    • 参数: row, event, column

  10. row-dblclick:

    • 类型: Function
    • 用途: 当某一行被双击时会触发该事件。
    • 参数: row, event, column

  11. header-click:

    • 类型: Function
    • 用途: 当某一列的表头被点击时会触发该事件。
    • 参数: column, event

  12. header-contextmenu:

    • 类型: Function
    • 用途: 当某一列的表头被鼠标右键点击时触发该事件。
    • 参数: column, event

  13. sort-change:

    • 类型: Function
    • 用途: 当表格的排序条件发生变化的时候会触发该事件。
    • 参数: column, prop, order

  14. filter-change:

    • 类型: Function
    • 用途: 当表格的筛选条件发生变化的时候会触发该事件。
    • 参数: filters

  15. current-change:

    • 类型: Function
    • 用途: 当表格的当前行发生变化的时候会触发该事件。
    • 参数: currentRow, oldCurrentRow

  16. header-dragend:

    • 类型: Function
    • 用途: 当列的宽度被改变时触发该事件。
    • 参数: newWidth, oldWidth, column, event

三。 el-table 插槽详解

  1. default:

    • 插槽名称: default
    • 用途: 表格的内容。

  2. empty:

    • 插槽名称: empty
    • 用途: 表格为空时显示的内容。

  3. append:

    • 插槽名称: append
    • 用途: 表格尾部追加的内容。

  4. header:

    • 插槽名称: header
    • 用途: 表头的内容。

  5. footer:

    • 插槽名称: footer
    • 用途: 表格底部的内容。

四。示例代码

<template>
  <div>
    <h2>Table 示例</h2>

    <!-- 基本用法 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      highlight-current-row
      @row-click="handleRowClick"
      @cell-click="handleCellClick"
      @selection-change="handleSelectionChange">
      <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>

    <!-- 自定义空内容 -->
    <el-table
      :data="emptyTableData"
      style="width: 100%"
      :empty-slot="emptySlot">
      <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-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
        <template slot="header" slot-scope="scope">
          <span style="color: red;">{{ scope.column.label }}</span>
        </template>
      </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 setup>
import { ref } from 'vue'

const tableData = ref([
  { 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: '上海市普陀区金沙江路 1516 弄' }
])

const emptyTableData = ref([])

const emptySlot = () => {
  return '暂无数据'
}

const handleRowClick = (row, event, column) => {
  console.log('行点击:', row, event, column)
}

const handleCellClick = (row, column, cell, event) => {
  console.log('单元格点击:', row, column, cell, event)
}

const handleSelectionChange = (selection) => {
  console.log('选择项变化:', selection)
}
</script>

<style scoped>
/* 自定义样式 */
.el-table {
  margin-bottom: 20px;
}
</style>

五。 代码解释

  1. 基本用法:

    • 使用 el-table 组件并设置基本属性。
    • <el-table
  :data="tableData"
  style="width: 100%"
  stripe
  border
  highlight-current-row
  @row-click="handleRowClick"
  @cell-click="handleCellClick"
  @selection-change="handleSelectionChange">
  <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>

  2. 自定义空内容:

    • 使用 empty-slot 插槽自定义表格为空时显示的内容。
    • <el-table
  :data="emptyTableData"
  style="width: 100%"
  :empty-slot="emptySlot">
  <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>

  3. 表头自定义:

    • 使用 header 插槽自定义表头的内容。
    • <el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    width="180">
    <template slot="header" slot-scope="scope">
      <span style="color: red;">{{ scope.column.label }}</span>
    </template>
  </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>
avatar
文章
阅读
粉丝