vxe-table组件使用说明(第一版)

组件名称

vxe-table

组件官网地址

vxetable.cn/v3/#/table/…

说明

该组件已经全局注册, 可全局使用

使用实例

补充说明

常用的 s-table 组件属性

// 表格加载
loading

// 表格高度
height

// 表格数据
data

// 是否启用表格空数据 null '' 用 - / -  替代
nullData

// 表头配置 ( 具体配置见官网)
columns

// 工具栏三种形式
toolbarFun
Boolean | Function | String,
1 值为 Function(默认为 getTableData) 有刷新功能
2 值为 '', 没有刷新功能的工具栏
3 值为 false 没有整体功能栏
4 值为 'left', 只有左侧的自定义按钮等工具, 没有右侧整体功能

// 表格查询 form 的字段 ,
queryForm
例:
<s-table
  :queryForm="req"
></s-table>

    data(){
      return {

        req:{
          name: '',
          pname: '',
          date: ''
        }
      }
    }

btns
表格操作按钮配置(见实例 77 行)

btnsWidth
表格操作按钮列宽, 可以自定义宽度, 不设置该值, 则默认为 250
< !!! 注意 > : 若表格为子父表关系, 则不设置该值, 设置了也没有用

btnsColumnTooltip
表格操作列表头 tooltip 提示

border
表格边框
boolean | string
default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
默认: outer

align
所有的列对齐方式
string
left（左对齐）, center（居中对齐）, right（右对齐）
默认: center

tablePage
  表格分页控件
  showPage: false,
  ownPaging: true,
  pageIndex: 1,
  pageSize: 20,
  total: 0

# columns 常见配置

## type:
  seq
  序号
  checkbox
  复选框
  radio
  单选框
  expand
  展开行
  html
  HTML 标签（动态渲染任意 HTML 是非常危险的，很容易导致 XSS 攻击，应该确保内容是可信的）

## field
列字段名（注：属性层级越深，渲染性能就越差，例如：aa.bb.cc.dd.ee）

## title
列标题

## width
列宽度（如果为空则均匀分配剩余宽度，如果全部列固定了，可能会存在宽屏下不会铺满，可以配合 "%" 或者 "min-width" 布局）

## resizable
列是否允许拖动列宽调整大小

## visible
默认是否显示

## fixed
将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）

## align
列对齐方式

## sortable
数据排序，是否允许列排序

## tooltip
表头 tooltip

# 详情见官网

https://vxetable.cn/v3/#/table/start/install

部分封装过的 events / methods

2024-6-7 更新

1 、表格新增 导出表格数据功能 可纯前端导出 使用: <ToolbarButton title="导出" @click="exportFile()"> methods: { exportFile(){ this.$refs.sTable.openExport() } }

2、表格新增分页功能

前端分页时,不用写@pageChange="pageChange" ownPaging 为 true

tablePage: { ownPaging: true }

后端分页时, 不用写 ownPaging: true 或者 ownPaging: false @pageChange="pageChange"

tablePage: { ownPaging: false }