前言
在前端开发中，数据表格是不可或缺的组件，而 Element UI 是一款流行的 UI 框架，提供了 table 组件作为数据表格的实现。不过在实际项目开发中，我们经常需要对 table 组件进行一些自定义操作，这时候就可以使用另一个 npm 包 - element-ui-table-custom。
element-ui-table-custom 是对 element-ui table 组件的增强，可以提供自定义列宽、自定义列排序、自定义列筛选等功能。本篇文章将详细介绍如何使用 element-ui-table-custom。
安装
使用 element-ui-table-custom 首先需要安装 Element UI 和 element-ui-table-custom 两个包：
npm install element-ui -S npm install element-ui-table-custom -S
使用
在项目中引用 element-ui 和 element-ui-table-custom：
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import ElTableCustom from 'element-ui-table-custom' import 'element-ui-table-custom/lib/element-ui-table-custom.css' Vue.use(ElementUI) Vue.use(ElTableCustom)
然后在 Vue 的模板中使用：
<el-table-custom
:data="tableData"
:columns="tableColumns"
:default-sort="{prop: 'date', order: 'descending'}"
@sort-change="sortChange"
>
</el-table-custom>其中 tableData 是数据，tableColumns 是表格列的配置：
-- -------------------- ---- -------
------ -
------ -
---------- -
-
----- -------------
----- ------
-------- ---- ---- ----- --- --- --------
--
-
----- -------------
----- --------
-------- ---- ---- ----- --- --- --------
--
-
----- -------------
----- -------
-------- ---- ---- ----- --- --- --------
-
--
------------- -
-
------ -----
----- -------
------ ----
--------- ----
--
-
------ -----
----- -------
------ ----
--------- ----
--
-
------ -----
----- ---------
-
-
-
--其中 label 是列名，prop 是数据字段名，width 是列宽，sortable 表示是否支持排序。
功能介绍
列宽自定义
在 tableColumns 配置中，加入 width 字段，即可自定义列宽。
列排序自定义
在 tableColumns 配置中，加入 sortable 字段，即可使该列支持排序。同时需要在 el-table-custom 的 default-sort 属性中设置默认排序，和监听 @sort-change 事件来修改排序。
<el-table-custom
:data="tableData"
:columns="tableColumns"
:default-sort="{prop: 'date', order: 'descending'}"
@sort-change="sortChange"
>
</el-table-custom>methods: {
sortChange({ column, prop, order }) {
// ...
}
}列筛选自定义
在 tableColumns 配置中，加入 filters 字段，即可使该列支持筛选。filters 是一个数组，每个元素代表一个筛选项。
在 el-table-custom 的 filter-change 事件中获取筛选后的数据。
<el-table-custom :data="tableData" :columns="tableColumnsWithFilters" @filter-change="filterChange" > </el-table-custom>
-- -------------------- ---- -------
--------- -
------------------------- -
------ -
-
------ -----
----- -------
------ ----
--------- -----
-------- -
- ------ ------------- ----- ------------ --
- ------ ------------- ----- ------------ --
- ------ ------------- ----- ------------ --
--
------------- ------- ---- -- -
------ ----------------------- --- --
-
--
-- ---
-
-
--
-------- -
--------------------- -
-- ---
-
-其中 filterMethod 是一个函数，用于判断数据是否满足筛选条件。
总结
通过本文的介绍，你已经了解了如何使用 element-ui-table-custom 来增强 Element UI 的 table 组件，实现自定义列宽、自定义列排序、自定义列筛选等功能。
使用 element-ui-table-custom 可以大大提高表格组件的灵活性，也让我们更加便捷地完成数据展示的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a581e8991b448dfe2e