基于el-table二次封装的通用表格组件

特性：

• 数据驱动，省去一个一个写el-table-column标签和属性的烦恼，表格的表头可以存到后端。
• 支持通过拖拽改变列的位置
• 支持通过拖拽改变行的位置
• 支持loading自定义
• 支持具名插槽语法
• 支持可选的复选框列和序号列
• 支持自定义每一列的显示和隐藏，以及是否允许隐藏
• 拖拽的实现依赖于sortablejs库

表格使用方式：

import TrsTable from '@/components/normal/TrsTable.vue';

表格组件属性说明

table

• table：表格配置-对象(非必传)

属性	类型	说明	是否必传	默认值
select	Boolean	是否显示复选框	否	false
type	Boolean	是否显示序号列	否	false
strip	Boolean	是否显示斑马纹	否	false
height	String	表格高度	否	40px
labelToogle	Boolean	能否配置表头各列的显示隐藏	否	false
rowKey	String	数据对象主键	是	‘’
colDragble	Boolean	列是否能拖拽改变顺序	否	false
rowDragble	Boolean	行是否能拖拽改变顺序	否	false
ref	String	表格的全局引用名称	是	undefined
loading	Boolean	表格是否处于loading状态	否	否
loadingText	String	表格加载loading时的提示文本	否	‘加载中’
typeText	String	序号列表头文本	否	‘序号’
align	String	表格对齐方式	否	‘left’

table-label

• table-label: 表头字段配置-数组对象（必传，不可为空）

属性	类型	说明	是否必传	默认值
title	String	列名称	是
fiexd	String	列固定方向，left		right
sort	String	字段排序设置	否	​
width	String	列宽度	否
prop	String	列对应表格数据中的字段	是
formatter	Function	自定义格式化方法，参数为当前行与列function（row, column） => {…}	否
ellipsis	Boolean	是否文本溢出并在hover时tooltip显示完整文本	否
align	String	列数据对齐方式	否	‘left’
headerAlign	String	列表头对齐方式	否	如果不传，则尝试使用列的align设置，如果列的align也没传，尝试使用表格的align设置，如果表格的align也没设置，则默认为’left’;
visible	Boolean	是否显示当前列	否	true
canHide	Boolean	是否允许隐藏	否	false
slot	String	具名插槽名称	否	不传则采用formatter函数显示数据，如果没有传formatter函数，则直接显示表格数据中的值。

示例：

[
                {
                    title: '姓名',// 列名
                    prop: 'trueName', // 字段名
                    width: '180', // 规定列宽
                    ellipsis: true, // 内容超出列宽是否显示省略符号并进行tooltip提示
                    slot: 'trueName', // 具名插槽名称
                  	align: 'center', // 内容对齐方式
                  	sort: 'custom', // 字段排序设置
                  	formatter: (row, column) => {
                        return row.monthlySpreadPoint ?? '--';
                    }, // 内容格式化方法，如果该函数和插槽同时存在，则优先使用该格式化方法
                    visible: true, // 是否显示该列
                    order: 1, // 排序序号，按照列从左至右，数字从小到大
                    headerAlign: 'center' // 该列表头对齐方式，如果不传，与align一致，如未传align,则与表格的对齐一致，如果表格对齐未传，则默认居左
                		canHide: true, // 是否可以隐藏该列，默认不传则为不可隐藏
                    fixed: 'left', // 将该列固定在左侧（left）或右侧(right),默认不传则不固定。 
                   },
                
             
    ],

table-data

表格数据， 必传

事件说明

事件名称	说明	回调参数
sort	可排序字段表头被点击时的处理方法	参数同el-table的 sort-change
labelChange	头字段可见性配置发生变化时的处理方法	参数是当前表头配置数组
handleSelectionChange	当前表格数据勾选项发生变化时的处理方法	参数同el-table的selection-change
colChange	列拖拽排序后的处理方法	拖拽后的列配置
rowChange	行拖动后的处理方法	源位置，目标位置

表格插槽使用说明

在使用el-table时，通常我们是像如下方式来使用列插槽的：

而在trs-table中，我们使用具名插槽代替了上面的作用域插槽的写法：

可以发先，唯一的不同就是template标签中，作用域插槽是使用slot-scope属性来将当前作用域传入插槽的，而具名插槽则是同时#slotName形式将作用域传入插槽的。
​

表头可见性配置功能说明

1. 可在此处配置列的可见性，勾选的为可见，不勾选的不可见
2. 点击此按钮切换配置功能的显示/隐藏，如果在进行取消勾选/勾选操作后，没有点击确定按钮，就点击了该按钮，则在隐藏配置功能同时恢复所有项为打开配置功能时的勾选状态
3. 如果在进行取消勾选/勾选操作后，没有点击确定按钮，就点击了该按钮，则在隐藏配置功能同时恢复所有项为打开配置功能时的勾选状态点击此按钮隐藏配置功能，
4. 点击确定按钮后，才更新表格个字段的可见性。并且会向父组件吐出一个``lableChanged事件，如果需要将配置保存到服务端，可在该事件中处理。

表头拖拽排序功能说明

1. 可通过用鼠标拖拽列的表头类改变列在表格中的位置
2. 可通过用鼠标拖拽行改变数据在表格中的垂直方向的次序。
3. 拖拽列时如果有滚动条，拖动到接近左右滚动条滚动位置时，滚动条会自动滚动
4. 固定在左侧或右侧的列无法拖拽，无法改变顺序，始终位于最左面或最右面
5. 拖动改变顺序后，可见性配置功能中字段的位置也会发生相应变化。

源码