这里我使用的是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')