vxe-table使⽤（第⼀节）
vxe-table ⼀个全功能的 Vue 表格，满⾜绝⼤部分对 Table 的⼀切需求，与任意组件库完美兼容
因为公司项⽬需求，需要跟⼤数据还有表格汇总打交道，刚开始⽤的是组件element-ui，随着项⽬需求的增加，element-ui⽆法满⾜我所需要的，这个时候 vxe-table 进⼊了我的视线，接触了之后才发现他的功能是真的强⼤。
基础类型（⼤概的属性跟性能）
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>html radio点击变颜
<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 ⾏的动态样⾊
: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 列显⽰属性
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 事件就可以实现 两种⽅法
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。