Element-plus表格使用总结

这里我使用的是Vue工程进行开发学习，安装需要通过包管理器进行下载

 npm install element-plus --save

然后在main.js中配置文件即可使用，如果在引入index.css时没有提示，无需担心，直接写index.css即可导入样式。 

Table表格

表格用于展示多条解构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

当el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。

<template><el-table :data="tableData" style="width: 100%"><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>
</template><script lang="ts" setup>
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

斑马纹表格

stripe 可以创建带斑马纹的表格。如果true，表格将会带有斑马纹。

带边框表格

默认情况下，Table组件是不具有竖直方向的边框，如果需要，可以使用border属性，把该属性设置为即可使用。

带状态表格 

可将表格内容highlight显示，方便区分 [成功、信息、警告、危险] 等内容。

可以通过指定Table组件的 row-class-name 属性来为Table 中的某一行添加class，这样就可以自定义每一行的样式了。

首先需要在<style>中添加样式，因为这本质上是通过给tr添加类标签实现的。

<style>.el-table .warning-row {--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {--el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

JavaScript函数代码，这里应该用到了解构，所以rowIndex旁边的大括号不能去掉。

const tableRowClassName = ({rowIndex}) => {if (rowIndex === 1) {return 'warning-row'} else if (rowIndex === 3) {return 'success-row'}return ''
}

 之后在<el-table>标签中绑定row-class-name即可。

<el-table :data="userData"   style="width: 1000px"  :row-class-name="tableRowClassName" >

显示溢出工具提示的表格

当内容太长时，它会分成多行。可以使用show-overflow-tooltip 将其保留在一行中。

属性show-overflow-tooltip接受一个布尔值。为true时夺域的内容会在hover时以tooltip的形式显示出来。

特别提醒只有溢出才有提示，不溢出没有。

 固定表头

纵向内容过多时，可选择固定表头。

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

固定列 

横向内容过多时，可选择固定列。

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

 流体高度

当数据量动态变化时，可以为Table设置一个最大高度。

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

 多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

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

注意代表多个列的表头不写prop属性。 

 固定表头

支持固定群表头，组头的属性fixed由最外层el-table-column决定。

单选

选择单行数据时使用色块表示。

Table组件提供了单选的支持，只需要配置 highlight-current-row 属性即可实现单选。 之后由current-change 事件来管理选中时触发的事件，它会传入currentRow, oldCurrentRow。如果需要显示索引，可以增加一列el-table-column, 设置type属性为index即可显示从1开始的索引号。

这个是该方法的非TypeScript语法。 

const signleTableRef = ref()const setCurrent = (row) => {if(signleTableRef.value) {signleTableRef.value.setCurrentRow(row);}

 需要注意在<el-table>标签中添加highlight-current-row，同时在该方法传入的tableData[1]中是和表格绑定的数据。

多选 

也可以选择多行。

在2.8.3之后， toggleRowSelection支持第三个参数 ignoreSelectable 以确定是否忽略可选属性。

实现多选非常简单：手动添加一个el-table-column,设type属性为selection即可；

 <el-table-column type="selection" :selectable="selectable" width="55" />

selectable中row是整个表格的信息，index是表格的索引，可以根据每行中具体的数据进行筛选可选与不可选，这里我表格中有userId这个属性，如果想在其他中表格中使用，需要更改为对应表格数据。

//根据表格数据筛选
const selectable = function(row,index) {  console.log(row,index)return ![13, 8].includes(row.userId)
};  //根据表格索引筛选
const selectable = function(row,index) {  console.log(row,index)return ![0,1].includes(index)
}; 

 排序

对表格进行排序，可快速查找或对比数据。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过Table的 default-sort 属性设置默认的排序列和排序顺序。 可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序，需将sortable 设置为 custom，同时在Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 在本例中，还使用了 formatter 属性，它用于格式化指定列的值，接受一个Function，会传入两个参数： row 和 column，可以根据自己的需求进行处理。

 sortable这个属性是用来给表格上方添加按钮可以选择排序，不会立即对表格进行排序，设置:default-sort可以立即对表格进行排序。

这里没有做任何处理，可以根据自身需求进行更改。 

 筛选

对表格进行筛选，可快速查找到自己想看的数据。

在列中设置filters 和 filter-method 属性即可开启该列的筛选，filters是一个数组，filter-method 是一个方法，它用于决定某些数据是否会显示，会传入三个参数：value，row 和 column。

filter控制筛选是通过表格上方的下拉箭头进行筛选控制的。 

 注意这里用了三个等号，如果值对但数据类型不同不会显示的。

const filterHandler = (value, row, column) => {console.log(value,row,column)const property = column['property']return row[property] === value
}

自定义列模板

自定义列的显示内容，可组合其他组件使用。

通过 slot 可以获取到row、column, $index 和 store(table 内部的状态管理）的数据。

自定义表头

表头支持自定义，通过设置slot来自定义表头。

const search = ref('')
const filterTableData = computed(() =>tableData.filter((data) =>!search.value || data.name.toLowerCase().includes(search.value.toLowerCase()))
)

展开行

当行内容过多并且不想显示横向滚动条时，可以使用Table展开行功能。

通过设置type = “expand” 和 slot 可以开启展开行功能， el-table-column 的模板会被渲染称为展开行的内容，展开行可访问的属性与使用自定义列模板时的slot相同。

 树形数据与懒加载

支持树类型的数据显示。当row中包含children 字段时，被视为树形数据。渲染嵌套数据需要prop的 row-key。 此外，子行数据可以异步加载。设置Table的lazy属性为true 与 加载函数 load。 通过指定row中的 hashChildren 字段来指定哪些行是包含子节点。 children 与 hashChildren 都可以通过 tree-props 配置。

 树形结构需要数据中有children这个属性。

const load = (row, treeNode, resolve) => {  setTimeout(() => {  resolve([  {  id: 31,  date: '2016-05-01',  name: 'wangxiaohu',  address: 'No. 189, Grove St, Los Angeles',  },  {  id: 32,  date: '2016-05-01',  name: 'wangxiaohu',  address: 'No. 189, Grove St, Los Angeles',  },  ]);  }, 1000);  
};  

表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。

将show-summary 设置为 true 就会在表格尾部展示合计行。 默认情况下，对于合计行，第一列不进行数据求和操作，而是显示【合计】二字（可通过 sum-text 配置) ，其余列会将本列所有数值进行求和操作，并显示出来。当然，你也可以定义自己的合计逻辑。 使用summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，可以是一个VNode或String。

 

const getSummaries = (param) => {  const { columns, data } = param;  const sums = [];  columns.forEach((column, index) => {  if (index === 0) {  sums[index] = document.createElement('div');  sums[index].style.textDecoration = 'underline';  sums[index].textContent = 'Total Cost';  return;  }  const values = data.map((item) => Number(item[column.property]));  if (!values.every((value) => Number.isNaN(value))) {  sums[index] = `$ ${values.reduce((prev, curr) => {  const value = Number(curr);  if (!Number.isNaN(value)) {  return prev + curr;  } else {  return prev;  }  }, 0)}`;  } else {  sums[index] = 'N/A';  }  });  return sums;  
};  

合并行或列

多行或多列共用一个数据时，可以合并行和列。

通过给table传入span-method 方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前row、当前列column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan， 第二个元素代表colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {  if (rowIndex % 2 === 0) {  if (columnIndex === 0) {  return [1, 2];  } else if (columnIndex === 1) {  return [0, 0];  }  }  
};  

自定义索引

自定义 type=index 列的行号。

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

 方法的代码部分。

表格布局

通过属性table-layout 可以指定表格中单元格、行和列的布局方式。

const tableLayout = ref('fixed')