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>
	<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 列显示属性

<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}`)
   }