在vue2.6项目中拓展集成vxe-table组件教程
环境：vue2.6
1. 安装xe-utils vxe-table
npm install xe-utils vxe-table
注： xe-utils是vxe-table的依赖环境，需要一并安装。
2.添加main.js
import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
注： 部分人安装时可能会出现像下图这样的阴影情况，这里没事，请不要删除。
3.构筑vxe-table组件
创建如下图目录：在components包下创建hxlh-table包，然后在创建hxlh-table.vue文件。
hxlh-table.vue文件的内容：
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div class="hxlh-table">
<vxe-grid
ref="vxeTable"
:show-header-overflow="true"
:show-overflow="showOverflow"
:stripe="true"
:border="true"
:show-footer="showfooter"
header-align="center"
highlight-hover-column
highlight-hover-row
resizable
:loading="loading"
:pager-config="tablePage"
:form-config="tableForm"
:columns="columns"
:data.sync="data"
:checkbox-config="checkboxConfig"
:height="height"
:max-height="maxHeight"
:toolbar="toolbar"
:reload-data="reloadData"
:footer-method="footerMethod"
:footer-cell-class-name="footerCellClassName"
@sort-change="sortChange"
@page-change="pagerChange"
@form-submit="findList"
@checkbox-change="checkChange"
@checkbox-all="checkChangeall"
>
<template v-slot:buttons>
<slot />
</template>
</vxe-grid>
</div>
</template>
<script>
export default {
name: 'HxlhTable',
props: {
/* table 参数*/
showOverflow: {
type: Boolean,
default: () => {
return true
}
},
columns: {
type: Array,
default: () => {
return []
}
},
showfooter: {
type: Boolean,
default: () => {
return false
}
},
toolbar: {
type: Object,
default: () => {
return {
id: 'khjgz',
zoom: true,
resizable: {
storage: true
},
custom: {
storage: true
},
slots: {
buttons: 'buttons'
}
}
}
},
data: {
type: Array,
default: () => {
return []
}
},
loading: {
type: Boolean,
default: false
},
page: {
type: Object,
default: function() {
return null
}
},
checkboxConfig: {
type: Object,
default: () => {
return {
}
}
},
maxHeight: {
type: String,
default: () => {
return ''
}
},
height: {
type: String,
default: () => {
return ''
}
},
reloadData: {
type: Function,
default: () => {
return {
}
}
},
footerCellClassName: {
type: Function,
default: () => {
return {
}
}
},
mxTableFootData: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
tableForm: {
}
}
},
computed: {
tablePage() {
if (!this.page) {
return
}
return {
total: this.page.total,
currentPage: this.page.current,
pageSize: this.page.size,
align: 'left',
pageSizes: [10, 20, 50, 100, 500],
layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
perfect: true
}
},
footData() {
return this.mxTableFootData
}
},
methods: {
pagerChange({
type, currentPage, pageSize }) {
if (type == 'current') {
this.$emit('changePageNo', currentPage)
} else if (type == 'size') {
this.$emit('changePageSize', pageSize)
}
},
findList() {
},
sortChange({
column, property, order }) {
this.$emit('sortTable', property, order)
},
checkChange(info) {
const {
records, checked, row, rowIndex } = info
this.$emit('on-checkbox', {
records, rowIndex, checked })
},
checkChangeall(info) {
const {
records, checked, row } = info
this.$emit('on-checkbox', {
records, rowIndex: null, checked })
},
footerMethod({
columns, data }) {
this.$emit('footerMethod', {
columns, data })
return this.$store.state.hxlhTableFootData
},
handleSum(list, field) {
var total = 0
for (var index = 0; index < list.length; index++) {
total += Number(list[index][field] || 0)
}
return total
},
// 在值发生改变时更新表尾合计
updateFooter(params) {
const xTable = this.$refs.vxeTable
xTable.updateFooter()
},
// 取消复选框选择
clearCheckboxRow() {
const xTable = this.$refs.vxeTable
xTable.clearCheckboxRow()
}
}
}
</script>
<style scoped lang="less">
</style>
<style lang="less">
.hxlh-table .vxe-toolbar .vxe-tools--operate {
margin-top: -23px;
}
.hxlh-table .vxe-toolbar {
min-height: 52px;
height: auto;
}
.vxe-table .vxe-footer--column.col-red {
color: red;
}
</style>
注： 这里为什么要去构筑组件呢，是因为方面我们项目中直接导入这个构筑好的组件去使用，这样可以提高项目表格结构的统一性，也便于管理所有表格的默认状态，初始状态与功能。
4.页面使用
在页面上到组件并使用即可。
导入：
import HxlhTable from '@/components/hxlh-table/hxlh-table'
//--------
components: {
HxlhTable},
完整代码：
<template>
<div id="view">
<el-card style="width: 100%" class="box-card">
<div slot="header" class="clearfix">
<span><b>表格展示</b></span>
</div>
<div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
<hxlh-table
style="width: 100%"
:columns="columns"
:data="tableData"
:loading="loading"
:page="page"
>
<!--查询条件-->
<el-form ref="queryForm" style="width: 100%" inline>
<el-form-item label="接口名" style="float: left" class="form_btn ">
<el-input v-model="selectItem.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item style="float: right" class="form_btn ">
<el-button icon="el-icon-search" @click="alert('暂时无法搜索')">搜索</el-button>
</el-form-item>
</el-form>
</hxlh-table>
</div>
</el-card>
</div>
</template>
<script>
import HxlhTable from '@/components/hxlh-table/hxlh-table'
export default {
name: 'dashboard',
components: {
HxlhTable},
data() {
return {
//搜索使用组件
selectItem: {
name: '',
},
// 表格-项目所有数据
tableData: [{
code:'111',
name:'张三',
sex:'男'
},{
code:'222',
name:'李四',
sex:'男'
},{
code:'333',
name:'王五',
sex:'男'
},{
code:'444',
name:'赵六',
sex:'女'
}
],
// 表格配置
columns: [
{
type: 'seq', title: '序号', width: 60},
{
title: '编号',
field: 'code'
},
{
title: '名称',
field: 'name'
},
{
title: '性别',
field: 'sex'
},
],
// 表格缓冲
loading: false,
/* 分页属性*/
page: {
total: 4,
current: 1,
size: 10
}
}
},
mounted() {
},
methods: {
}
}
</script>
<style scoped="scoped">
#view {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.box-card {
width: 480px;
}
</style>
效果：
注： 项目中如没有less-loader 会报错提示需要安装less-loader，使用npm install安装上即可。
到这里就可以正常使用了，另外分享一下官方API文档：https://xuliangzhan.gitee.io/vxe-table/#/table/start/use
本教程是我在项目中边集成边写的，绝对保证了真实性可用性。部分地方写的不到位的欢迎指出，蟹蟹。
如果觉得有帮助的话给个免费的点赞吧，Thanks♪(･ω･)ﾉ