VXE-Table 大致组件

VXE-Table

Install

1. 项目安装

   // npm install xe-utils@3 vxe-table@3
   
   import Vue from 'vue'
   import 'xe-utils' 
   // 全部引入
   import VXETable from 'vxe-table'
   import 'vxe-table/lib/style.css'
   
   Vue.use(VXETable)
   

2. 单页面

按需加载

项目引入时可选择按需加载组件和样式

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/use

图标

图标样式表：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/icons

图标：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/module/icon

使用：

颜色变量

修改颜色变量官方链接：

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/theme

// 引入全局变量
@import 'vxe-table/styles/variable.scss';
// 修改样式变量
$vxe-font-size: 14px;
$vxe-font-color: #666;
// ...
// 引入全部模块样式
@import 'vxe-table/styles/modules.scss';

vxe-table

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/table/api

vxe-colgroup

表格列组，常用于总标题和子标题

vxe-column

表格列

vxe-grid

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/grid/api

vxe-button

按钮带边框，纯文本按钮，下拉按钮

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/button/api

vxe-radio

vxe-radio-group

按钮组，可以把一组单选按钮包裹起来用以区分

vue-radio-button

按钮形式的单选按钮

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/radio/api

vxe-checkbox

vxe-checkbox-group

按钮组，可以把一组复选框按钮包裹起来用以区分

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/checkbox/api

vxe-switch

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/switch/api

vxe-input

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/input/api

vxe-textarea

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/textarea/api

vxe-select

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/select/api

vxe-optgroup

下拉选项组

vxe-option

下拉选项

vxe-pulldown

vxe-pager

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/pager/api

vxe-table + vxe-pager

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/module/pager

vxe-toolbar

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/toolbar/api

vxe-table + vxe-toolbar

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/module/toolbar

vxe-form

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/form/api

vxe-form-gather

表单列容器，span表示栅格占据的列数（共 24 分栏）

vxe-form-item

表单项

vxe-list

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/list/api

（注：必须固定容器高度和行高）

vxe-modal

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/modal/api