element-ui表格操作大全

一、基础表格展示

数据绑定：

在el-table元素中注入data对象数组，在el-table-column（列）中使用prop属性来对应对象中的键名，使用label属性定义列名

元素案例内容：

<el-table border :data="userList">
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="Name" prop="name"></el-table-column>
    <el-table-column label="AGE" prop="age"></el-table-column>
    
  </el-table>

那么上述代码就实现了绑定userList的数组对象，一共有三列，第一列列名为ID，绑定的数组对象key值为id，以此类推。

对应数据script部分案例：

import {ref} from 'vue'
const userList=ref([{id:'1',name:'tom',age:'20'},{id:'2',name:'张三',age:'20'},{id:'3',name:'李四',age:'20'},{id:'4',name:'李四',age:'20'}])

二、表格样式

边框：border、斑马纹：stripe、行高亮：row-class-name

要设置什么样式就在el-table表格标签中填入什么属性即可

例如，要添加斑马纹样式：

<el-table stripe>

三、显示溢出工具提示的表格

当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式暂时显示出来。

案例代码：

<template>
<el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
<el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column
      property="address"
      label="use show-overflow-tooltip"
      width="240"
      show-overflow-tooltip
    />
    <el-table-column property="address" label="address" />
</el-table>
</template>
<script setup>
const tableData: User[] = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  }]
</script>

上述代码将 地址列进行溢出处理

页面样式：

当悬停于地址列内容时将显示：

 四、固定表头和列

1、固定表头（纵向内容过多时）：

只要在 el-table 元素中定义了 height 属性，大小根据需求来，即可实现固定表头的表格，而不需要额外的代码。

 2、固定列（横向内容过多时）：

固定列需要使用 fixed 属性，它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。

五、流体高度

当数据量动态变化时，又想展示固定高度。可以为 Table 设置一个最大高度。

通过设置 max-height 属性为 el-table 指定最大高度。 此时若表格所需的高度大于最大高度，则会显示一个滚动条

例如：

 <el-table :data="tableData" style="width: 100%" max-height="250">

六、多级表头

只需要将el-table-column 放置于el-table-column 中，也就是嵌套，你可以实现组头。

例如：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="150" />
    <el-table-column label="Delivery Info">
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column label="Address Info">
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
 
]
</script>

上述代码中的 Delivery Info列包含了Name列和Address Info列，而Address Info又包含了state,city,address,zip列。实现了组头

页面效果：

 七、排序和筛选

1、排序

在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。

案例代码：

<el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>

上述代码在table中设置了default-sort属性，值内有两个键值对，一个是prop表示将date列设置为默认排序列，order代表排序方式，升序或降序，案例中是降序，升序为：ascending。在date列属性也设置了sortable表示以这个列为基准排序

2、筛选

在列中设置 filters 和 filter-method 属性即可开启该列的筛选， filters 是一个数组，也就是筛选的数据，filter-method 是一个方法，它用于决定某些数据是否显示。

例如有个表格的其中一列这样设置：

<el-table-column
      prop="tag"
      label="Tag"
      width="100"
      :filters="[
        { text: 'Home', value: 'Home' },
        { text: 'Office', value: 'Office' },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >

他的filter-method函数代码为：

const filterTag = (value: string, row: User) => {
  return row.tag === value
}

意义为当前行的value如果等于被选中的value就会返回true，那么该行就会被显示

八、展开行和合计行（当行内容过多并且不想显示横向滚动条时）

1、展开行

设置 type="expand" 和 slot 可以开启展开行功能

例如：

 <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <el-table :data="props.row.family" :border="childBorder">
            <el-table-column label="Name" prop="name" />
            <el-table-column label="State" prop="state" />
            <el-table-column label="City" prop="city" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Zip" prop="zip" />
          </el-table>
        </div>
      </template>
    </el-table-column>

页面效果：

展开第一行：

 

 2、合计行

将 show-summary 设置为true就会在表格尾部展示合计行。 默认情况下，对于合计行，第一列不进行数据求合操作

例如：

<el-table :data="tableData" border show-summary style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" sortable label="Amount 1" />
    <el-table-column prop="amount2" sortable label="Amount 2" />
    <el-table-column prop="amount3" sortable label="Amount 3" />
  </el-table>

页面效果：

九、自定义索引 

通过给 type=index 的列传入 index 属性，可以自定义索引。 该属性传入数字时，将作为索引的起始值。 也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

例如：

 <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" :index="indexMethod" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

 上述代码将第一列作为索引列，并且传入了一个indexMethod函数：

const indexMethod = (index: number) => {
  return index * 2
}

自动传入了当前行数，然后返回了当前行数*2作为下一行索引值

页面效果：