element-ui表格table的一些用法介绍

介绍element-ui一些表格常用的用法。

1、设置可勾选：表格可设置勾选功能，设置type为selection即可，如果想设置某一行不可勾选，只需要给某一行加一个selectable属性，再在对应的方法里面返回对应的boolean值。

<el-table

ref=“multipleTable”

:data=“tableData”

tooltip-effect=“dark”

style=“width: 100%”

@selection-change=“handleSelectionChange”>

<el-table-column

type=“selection”

width=“55” : selectable = “selectableHandle”></el-table-column>
</el-table>

2、合并单元格：多行或多列共用一个数据时，可以合并行或列。通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。可能官网给的例子不是很详细。

<el-table

  :data="tableData"

  :span-method="arraySpanMethod"

  border

  style="width: 100%">

在methods 里面的arraySpanMethod方法里面可以设置合并的行和列，如果某一行需要占用两列，那么可以return [1,2],如果列数固定，那么要将被占用的那一列设置为0，比如return [1，0]，如下：

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

    if (rowIndex % 2 === 0) {

      if (columnIndex === 0) {

        return [1, 2];

      } else if (columnIndex === 1) {

        return [1, 0];

      }

    }

  }

3、容过多会单行显示

<el-table-column

  prop="address"

  label="地址"

  show-overflow-tooltip>

</el-table-column>

4、展开行：当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能，想在哪一列后面加展开功能，就把type 为expand这一列放在哪一行的后面，数据可通过接口重新获取，需要给table 标签加上row-key =”id” 属性。

5、自定义索引：自定义 type=index 列的行号

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

本文章由javascript技术分享原创和收集