vxe-table使用
vxe-table 一个全功能的 Vue 表格，满足绝大部分对 Table 的一切需求，与任意组件库完美兼容,它的功能是非常强大的
如果需要和大数据还有表格打交道， vxe-table是非常合适的，其他场景可以使用element-ui 处理；
API: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/fullEdit
基础类型（大概的属性跟性能）
1、表格的边框（有三种形式）
<vxe-table :data="tableData" border=true></vxe-table>
border=none 去掉外部边框
border=false 只显示外边框
border=true 显示所有边框
不设置默认 border=false 只显示外边框 这三种样式可以解决大部分表格边框的样式需求
2、每一列文字的方向 （居左、居中、居右）
<vxe-table :align="allAlign" :data="tableData"></vxe-table>
设置 属性 align “left”“center”“right”
3、序号 、列宽 、表格高度
序号
系统设置序号 type=seq 开启序号列
<vxe-table :data="tableData" type=seq> <vxe-table-column type="seq" width="60"></vxe-table-column> </vxe-table>
自定义起始序号 :seq-config="{startIndex: 100}"
<vxe-table :seq-config="{startIndex: 100}" :data="tableData">
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
</vxe-table>
自定义方法 :seq-config="{seqMethod: seqMethod}"
<vxe-table :seq-config="{seqMethod: seqMethod}" :data="tableData">
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
</vxe-table>
在vue的method 写一个seqMethod 方法
列宽
通过设置 width 参数，支持固定像素、百分比、自适应等，如果不设置则全部均匀分配
(注：不应该全部都使用固定像素，应该当所有列加起来的宽度小于表格宽度时，就会出现空白区，可以配合 “%” 或 “min-width” 实现等比例缩放) 不设置宽度即为自适应
通过设置 vxe-table的resizable 属性启用列宽拖动功能
当一个表格高度需要自适应的时候可以设置为最大高度 vxe-table 设置 max-height=“200” 如果设置 max-height，当内容为达到最大高度时会自适应 max-height=“100%” 也可以设置相对于父容器的百分比
4、每一个单元格内容放不下时显示 此为 vxe-table-column 的属性
当内容或表头超过隐藏时显示为省略号，show-overflow 和 show-header-overflow
ellipsis 当内容超过时显示为省略号
title 当内容超过时显示为省略号并用原生 title 显示
tooltip 当内容超过隐藏时显示为省略号并用 tooltip 显示
还可以通过 enterable 开启鼠标是否可进入到 tooltip 中
有点类似与 element-ui 但vxe-table显示的形式较多
5、斑马线条纹 （注：在可编辑表格场景下，临时插入的数据不会有斑马纹样式）、高亮
<vxe-table stripe highlight-current-row highlight-hover-row :data="tableData"></vxe-table>
缺点：没有element-ui 可以自定义斑马线的颜色 高亮的颜色
高亮
highlight-hover-row 鼠标移到行是否要高亮显示 boolean 布尔值
highlight-current-row 是否要高亮当前行 boolean 布尔值
highlight-hover-column 鼠标移到列是否要高亮显示 boolean 布尔值
highlight-current-column 是否要高亮当前列 boolean 布尔值
使用 highlight-current-row 显示高亮行；用户操作点击选项时会触发事件 current-change
6、单元格的样式
行的样色、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义
（注：当自定义样式之后可能会覆盖表格的样式，比如选中行…等，记得自行处理好相关样式）
vxe-table的属性
:header-cell-class-name 表头的样式
:row-class-name 行的样色
:cell-class-name 列的样式
:header-cell-style 表头的动态样色
:row-style 行的动态样色
:row-style="setRowClass"
methods:{
setRowClass({row, rowIndex}){
if(rowIndex === 0){
return "background: #3c80ff";
}
}
}
:cell-style 列的动态样色
隐藏表头 :show-header=“false”
7、固定表头和列
当纵向内容过多时，固定表头就非常有用了，通过设置 height 参数
vxe-table 设置属性 height=“400”
固定列，通过设置 fixed 参数
当横向内容过多时，将列固定在左右两侧 如果列宽足够的情况下，固定列不会浮动
在最左边的 vxe-table-column 设置 fixed=“left” 属性
在最右边的 vxe-table-column 设置 fixed="right"属性
8、表头分组
当数据结构比较复杂的时候，可以使用多级表头显示更加直观 相当于在 vxe-table-column 在套一层 vxe-table-column
<vxe-table-column title="基本信息">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
</vxe-table-column>
注：如果使用了分组表头，则需要按组来设置固定列，且固定列必须是在左右两侧位置，不允许跨列
9、 单选框 复选框
单选框 vxe-table-column type属性设置为 radio
<vxe-table-column type="radio" width="60"></vxe-table-column>
改变单选框所在列的表头
<vxe-table-column type="radio" width="60">
<template v-slot:header>
<vxe-button type="text">取消</vxe-button>
</template>
</vxe-table-column>
单选表格，用户手动选中时会触发事件 vxe-table 属性 radio-change 事件
checkMethod 方法控制 checkbox 是否允许用户手动选中，还可以配置 labelField 列显示属性
<vxe-table
border
ref="xTable2"
height="300"
:radio-config="{labelField: 'name', checkMethod}"
:data="tableData">
<vxe-table-column type="radio" title="请选择" width="100"></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
checkMethod ({ row }) {
return row.age > 26
}
默认选中，通过指定 checkRowKey 设置默认选中的行，指定默认值需要有 row-id
<vxe-table
border
height="300"
row-id="id"
:data="tableData"
:radio-config="{checkRowKey: '2'}">
<vxe-table-column type="radio" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
row-id=‘属性名或者参数名’ checkRowKey: ‘应该是哪个属性名或者参数名默认选中’
复选框
vxe-table-column type属性设置为 checkbox <vxe-table-column type="checkbox" width="60"> </vxe-table-column>
多选表格，用户手动勾选时会触发事件 checkbox-change
可以通过 checkMethod 方法控制 checkbox 是否允许用户手动勾选，还可以配置 labelField 列显示属性
<vxe-table
border
ref="xTable2"
:data="tableData"
:checkbox-config="{labelField: 'name', checkMethod}">
<vxe-table-column type="checkbox" title="All"></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
checkMethod ({ row }) {
return row.age > 26
}
通过配置 trigger 设置触发源，使用渲染最快的 checkField 属性绑定方式 点击行也选中
vxe-table 添加 属性 :checkbox-config="{checkField: ‘checked（属性名）’, trigger: ‘row’}"
每个列表的字段都有 checked（也可以是其他的名字 boolean值） 为false
通过指定 checkRowKeys 设置默认选中的行，指定默认值需要有 row-id
<vxe-table
border
highlight-hover-row
row-id="id"
:data="tableData"
:checkbox-config="{checkRowKeys: ['2', '3']}"
:radio-config="{labelField: 'name'}">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column type="radio" width="300" title="Name"></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
10、 排序
通过给需要排序功能的列加上 sortable 属性可以支持排序，
<vxe-table
border
highlight-hover-row
ref="xTable"
height="300"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="nickname" title="Nickname" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="time" title="Time" sortable></vxe-table-column>
</vxe-table>
还可以通过设置 sort-by 多字段进行排序
<vxe-table
border
highlight-hover-row
height="300"
:data="tableData">
<vxe-table-column field="time" title="Time" sortable :sort-by="['time', 'name']"></vxe-table-column>
</vxe-table>
如果是服务端排序，只需加上 remote-sort 和 sort-change 事件就可以实现 两种方法
<vxe-table
border
highlight-hover-row
height="300"
:data="tableData"
@sort-change="sortChangeEvent">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable :sort-method="sortNameMethod"></vxe-table-column>
<vxe-table-column field="nickname" title="Nickname" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="time" title="Time" sortable></vxe-table-column>
</vxe-table>
sortNameMethod (a, b) {
// 例如：名称不区分大小写的排序
var v1 = (a.name || '').toLowerCase()
var v2 = (b.name || '').toLowerCase()
return v1 < v2 ? -1 : v1 > v2 ? 1 : 0
},
sortChangeEvent ({ column, property, order }) {
console.info(property, order)
}
还可以通过调用 sort 方法实现手动排序
通过点击表头排序，通过 defaultSort 默认排序、通过配置 trigger 设置触发源
<vxe-table
border
highlight-hover-row
highlight-hover-column
height="300"
:data="tableData"
:sort-config="{trigger: 'cell', defaultSort: {field: 'age', order: 'desc'}}"
>
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="nickname" title="Nickname" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="time" title="Time" sortable></vxe-table-column>
</vxe-table>
11、 筛选
通过设置 filters 属性和 filter-method 方法可以支持列筛选功能，可以通过 filter-multiple=false 设置为单选
如果是服务端筛选，只需加上 filter-config={remote: true} 和 filter-change 事件就可以实现
如果是动态数据请配合 filter 方法，参数 filters 不支持动态数据
context 对象（查看高级用法）:
changeOption(event, checked, option) 更新选项的状态
confirmFilter() 确认筛选
resetFilter() 清除筛选条件
跟element-ui的筛选类似
12、空数据 加载中 HTML标签
不管是element-ui还是 vxe-table 在列表无数据的时候显示的样式比较单一
所以提供了一种 插槽 slot=empty
<vxe-table
border
:loading="loading"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
<template v-slot:empty>
<span style="color: red;">
<img src="static/other/img2.gif">
<p>没有更多数据了！</p>
</span>
</template>
</vxe-table>
此插槽 slot 可以放自己想要的动静态样式 而且无数据并且横向有滚动条的时候 此样式会保持一种居中的状态
加载中也就是相当于添加了一个loading
<vxe-table
border
highlight-hover-row
height="300"
:loading="loading"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
判断变量 loading是true还是false
HTML标签 vxe-table-column 的type类型改为 html
<vxe-table-column field="describeHtml" type="html" title="HTML 标签"></vxe-table-column>
13、格式化内容（比如日期 金额 银行卡号 数值）
局部自定义 formatter 格式化内容
（注：formatter 只会在指定的 field 值发生改变时触发格式化，如果想要多字段关联变化请使用自定义模板）
全局格式化内容，基于 xe-utils 函数库挂载方法进行数据处理，会在渲染的时候自动调用
（用于实现业务中统一的格式化处理，这对于很多场景非常有用，减少很多不必要的重复代码）
<vxe-table
border
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="date" title="转日期" width="180" formatter="formatDate"></vxe-table-column>
<vxe-table-column field="time" title="转日期格式" width="140" :formatter="['formatDate', 'yyyy-MM-dd']"></vxe-table-column>
<vxe-table-column field="amount" title="格式化金额" formatter="formatAmount"></vxe-table-column>
<vxe-table-column field="bankCard" title="银行卡" width="180" formatter="formatBankcard"></vxe-table-column>
<vxe-table-column field="num7" title="截取2位数" formatter="formatCutFixed"></vxe-table-column>
<vxe-table-column field="num7" title="四舍五入2位数" formatter="formatFixed"></vxe-table-column>
<vxe-table-column field="sex" title="格式化性别" :formatter="['formatSelect', sexList]"></vxe-table-column>
</vxe-table>
// 自定义全局的格式化处理函数
XEUtils.mixin({
// 格式化下拉选项
formatSelect (cellValue, list) {
let item = list.find(item => item.value === cellValue)
return item ? item.label : ‘’
},
// 格式化日期，默认 yyyy-MM-dd HH:mm:ss
formatDate (cellValue, format) {
return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')
},
// 格式金额，默认2位数
formatAmount (cellValue, digits) {
return XEUtils.commafy(cellValue, { digits: digits || 2 })
},
// 格式化银行卡，默认每4位隔开
formatBankcard (cellValue) {
return XEUtils.commafy(cellValue, { spaceNumber: 4, separator: ' ' })
},
// 四舍五入,默认两位数
formatFixed (cellValue, digits) {
return XEUtils.toNumber(cellValue).toFixed(digits || 2)
},
// 截取小数,默认两位数
formatCutFixed (cellValue, digits) {
return XEUtils.toFixedString(cellValue, digits || 2)
}
14、单元格事件绑定
@header-cell-click 表头单元格单机
headerCellClickEvent ({ row, rowIndex, column, columnIndex }, event) {
console.log(`表头单元格点击${column.title}`)
},
@header-cell-dblclick 表头单元格双击
headerCellDBLClickEvent ({ row, rowIndex, column, columnIndex }, event) {
console.log(`表头单元格双击${column.title}`)
},
@cell-click 单元格点击
cellClickEvent ({ row, rowIndex, column, columnIndex }, event) {
console.log(`单元格点击${column.title}`)
},
@cell-dblclick 单元格双击
cellDBLClickEvent ({ row, rowIndex, column, columnIndex }, event) {
console.log(`单元格双击${column.title}`)
},
@cell-mouseenter 鼠标进入单元格
cellMouseenterEvent ({ row, rowIndex, column, columnIndex }, event) {
console.log(`鼠标进入单元格${column.title}`)
},
@cell-mouseleave鼠标离开单元格
cellMouseleaveEvent ({ row, rowIndex, column, columnIndex }, event) {
console.log(`鼠标离开单元格${column.title}`)
}
https://blog.csdn.net/who_become_gods/article/details/105764086
https://blog.csdn.net/who_become_gods?type=blog
