今天给大家推荐一个好用、强大的Vue表格扩展组件。
项目简介
这是支持Vue 3/Vue 2的一个表格组件，支持表格增删改、虚拟表格、复杂表格、树形表格、数据校验、懒加载、分页、弹窗、单元格样式设置、按钮自定义样式、表头样式、单元格合等功能。
组件兼容各大浏览器、高效整洁的API设计、模块化表格。
版本介绍
1、支持Vue3.0、Vue2.0版本，2.0版本已暂停升级。
2、支持自定义主题
3、支持国际化
4、支持按需加载、扩展接口
安装方法
npm安装
npm install xe-utils vxe-table@next import { App, createApp } = 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
function useTable (app: App) {
app.use(VXETable) // 给 vue 实例挂载内部对象，例如：
// app.config.globalProperties.$XModal = VXETable.modal
// app.config.globalProperties.$XPrint = VXETable.print
// app.config.globalProperties.$XSaveFile = VXETable.saveFile
// app.config.globalProperties.$XReadFile = VXETable.readFile
} createApp(App).use(useTable).mount('#app')CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>快速入门
页面
<vxe-table border :data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name">
<template #default="{ row }">
<span>自定义插槽模板 {{ row.name }}</span>
</template>
</vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
</vxe-table>
<vxe-grid v-bind="gridOptions">
<template #name="{ row }">
<span>自定义插槽模板 {{ row.name }}</span>
</template>
</vxe-grid>js
exportdefault {
data () { return { tableData: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
], gridOptions: { border: true, columns: [
{ type: 'seq', width: 50 },
{ field: 'name', title: 'Name', slots: { default: 'name' } },
{ field: 'sex', title: 'Sex', showHeaderOverflow: true },
{ field: 'address', title: 'Address', showOverflow: true }
], data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]
}
}
}
}框架集成图标
使用示例
基础表格
<vxe-toolbar>
<template #buttons>
<vxe-button @click="allAlign = 'left'">居左</vxe-button>
<vxe-button @click="allAlign = 'center'">居中</vxe-button>
<vxe-button @click="allAlign = 'right'">居右</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
:align="allAlign"
:data="tableData1">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
</vxe-table>固定表头
<vxe-table
border
height="400"
:data="demo1.tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
<vxe-column field="address" title="Address" show-overflow></vxe-column>
</vxe-table>复杂表格-自定义模板、插槽
<vxe-toolbar>
<template #buttons>
<vxe-button>{{ $t('app.body.button.insert') }}</vxe-button>
<vxe-button>
<template #default>下拉按钮</template>
<template #dropdowns>
<vxe-button>删除</vxe-button>
<vxe-button>保存</vxe-button>
</template>
</vxe-button>
</template>
<template #tools>
<vxe-input v-model="demo1.value2" placeholder="搜索"></vxe-input>
</template>
</vxe-toolbar>
<vxe-table
border
show-footer
ref="xTable"
height="500"
:column-config="{resizable: true}"
:footer-method="footerMethod"
:data="demo1.tableData"
@checkbox-change="checkboxChangeEvent"
@checkbox-all="checkboxChangeEvent">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" width="160" :resizable="false" show-overflow>
<template #header>
<div class="first-col">
<div class="first-col-top">名称</div>
<div class="first-col-bottom">序号</div>
</div>
</template>
<template #footer="{ items, _columnIndex }">
<vxe-button status="primary" @click="clickFooterItem(items, _columnIndex)" size="mini">支持</vxe-button>
<vxe-button @click="clickFooterItem(items, _columnIndex)" size="mini">test abc</vxe-button>
</template>
<template #default="{ row }">
<vxe-button @click="showDetailEvent(row)">弹框{{ row.name }}</vxe-button>
</template>
</vxe-column>
<vxe-column field="name" title="app.body.label.name" sortable>
<template #default="{ row }">
<a href="https://github.com/x-extends/vxe-table" target="_black">我是超链接：{{ row.name }}</a>
</template>
</vxe-column>
<vxe-column field="sex" title="app.body.label.sex" :filters="[{data: ''}]" :filter-method="filterSexMethod">
<template #header>
<span style="color: red;">自定义头部</span>
</template>
<template #footer="{ items, _columnIndex }">
<span style="color: red">累计：{{ items[_columnIndex] }}</span>
</template>
<template #filter="{ $panel, column }">
<input class="my-filter" type="type" v-model="option.data" v-for="(option, index) in column.filters" :key="index" @input="changeFilterEvent($event, option, $panel)">
</template>
<template #default="{ row }">
<span>{{ row.sex }} </span>
<vxe-button type="text">编辑</vxe-button>
<vxe-button type="text">删除</vxe-button>
</template>
</vxe-column>
<vxe-column field="time" title="Time">
<template #header>
<vxe-input v-model="demo1.value1" placeholder="放个输入框" size="mini"></vxe-input>
</template>
<template #default="{ row, rowIndex }">
<template v-if="rowIndex === 2">
<vxe-switch v-model="row.flag"></vxe-switch>
</template>
<template v-else-if="rowIndex === 3">
<vxe-switch v-model="row.flag" open-label="开" close-label="关"></vxe-switch>
</template>
<template v-else>
<span>{{ formatDate(row.time) }}</span>
</template>
</template>
</vxe-column>
<vxe-column field="address" title="Address" show-overflow>
<template #default="{ row, rowIndex }">
<template v-if="rowIndex === 1">
<vxe-select v-model="row.flag1" transfer>
<vxe-option value="Y" label="是"></vxe-option>
<vxe-option value="N" label="否"></vxe-option>
</vxe-select>
</template>
<template v-else>
<a href="https://github.com/x-extends/vxe-table">{{ row.name }}</a>
</template>
</template>
</vxe-column>
<vxe-column field="html1" title="Html片段" width="200" show-overflow>
<template #default="{ row }">
<span v-html="row.html1"></span>
</template>
<template #footer>
<span>
<img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" style="width: 36px;">自定义模板<img src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif" style="width: 30px;">
</span>
</template>
</vxe-column>
<vxe-column field="img1" title="图片路径" width="120">
<template #default="{ row }">
<img v-if="row.img1" :src="row.img1" style="width: 100px;">
<span v-else>无</span>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
perfect
v-model:current-page="demo1.tablePage.currentPage"
v-model:page-size="demo1.tablePage.pageSize"
:total="demo1.tablePage.total"
:layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
<template #left>
<span class="page-left">
<vxe-checkbox v-model="demo1.isAllChecked" :indeterminate="demo1.isIndeterminate" @change="changeAllEvent"></vxe-checkbox>
<span class="select-count">自定义模板 {{ demo1.selectRecords.length }} 条</span>
<vxe-button>修改</vxe-button>
<vxe-button>管理</vxe-button>
<vxe-button>删除</vxe-button>
<vxe-button size="small">
<template #default>更多操作</template>
<template #dropdowns>
<vxe-button type="text">批量修改</vxe-button>
<vxe-button type="text">批量管理</vxe-button>
<vxe-button type="text">批量删除</vxe-button>
</template>
</vxe-button>
</span>
</template>
<template #right>
<img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="34">
<img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="34">
<img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="34">
</template>
</vxe-pager>
<vxe-modal v-model="demo1.showDetails" title="查看详情" width="800" height="400" resize>
<template #default>{{ demo1.selectRow ? demo1.selectRow.name : '' }}</template>
</vxe-modal>
表格编辑
<vxe-table
border
show-overflow
ref="xTable"
:column-config="{resizable: true}"
:loading="demo1.loading"
:data="demo1.tableData"
:edit-config="{trigger: 'manual', mode: 'row'}">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.name" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="role" title="Role" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
</template>
</vxe-column>
<vxe-column field="sex" title="Sex" :edit-render="{}">
<template #default="{ row }">
<span>{{ formatSex(row.sex) }}</span>
</template>
<template #edit="{ row }">
<vxe-select v-model="row.sex" transfer>
<vxe-option v-for="item in demo1.sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</template>
</vxe-column>
<vxe-column field="sex2" title="多选下拉" :edit-render="{}">
<template #default="{ row }">
<span>{{ formatMultiSex(row.sex2) }}</span>
</template>
<template #edit="{ row }">
<vxe-select v-model="row.sex2" multiple transfer>
<vxe-option v-for="item in demo1.sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</template>
</vxe-column>
<vxe-column field="num6" title="Number" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.num6" type="number" placeholder="请输入数值"></vxe-input>
</template>
</vxe-column>
<vxe-column field="date12" title="Date" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.date12" type="date" placeholder="请选择日期" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="date13" title="Week" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.date13" type="week" placeholder="请选择日期" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="address" title="Address" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.address" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column title="操作" width="160">
<template #default="{ row }">
<template v-if="$refs.xTable.isEditByRow(row)">
<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
</template>
<template v-else>
<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
</template>
</template>
</vxe-column>
</vxe-table>树形表格
<vxe-table
show-overflow
ref="xTree3"
border="inner"
:row-config="{isHover: true, useKey: true}"
:show-header="false"
:data="demo3.tableData"
:checkbox-config="{labelField: 'name'}"
:scroll-y="{enabled: false}"
:tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}">
<vxe-column type="checkbox" tree-node>
<template #default="{ row }">
<span>
<template v-if="row.children && row.children.length">
<i class="tree-node-icon fa" :class="$refs.xTree3.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
</template>
<template v-else>
<i class="tree-node-icon fa fa-file-o"></i>
</template>
<span>{{ row.name }}</span>
</span>
</template>
</vxe-column>
<vxe-column title="操作" width="140">
<template #default="{ row }">
<vxe-button type="text" icon="fa fa-eye"></vxe-button>
<vxe-button type="text" icon="fa fa-edit"></vxe-button>
<vxe-button type="text" icon="fa fa-trash-o" @click="removeRowEvent(row)"></vxe-button>
<vxe-button type="text" icon="fa fa-id-card-o"></vxe-button>
</template>
</vxe-column>
</vxe-table>高级表格-反转表格
<vxe-grid class="reverse-table" v-bind="gridOptions2"></vxe-grid>表单表格
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>好了，组件就给大家介绍到这边了，更多的具体功能，大家可以自己去实践。
Gtihub: https://github.com/x-extends/vxe-table
