element-ui-admin与vxe-table集成开发总结（1）
element-ui-admin与vxe-table集成开发总结（1）
安装篇
安装命令
npm install xe-utils vxe-table vxe-table-plugin-element element-ui
下载比较缓慢，最好设置成
npm config set registry https://registry.npm.taobao.org
通过如下命令可以查看是否配置成功
npm config get registry
npm info express
加载模块（这里面有坑，文档对初学者不友好，对于不擅长前端开发的我来说，耗费了好多精力，正确的配置方式应该是）
在 main.js 里面增加
import 'font-awesome/scss/font-awesome.scss'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
font-awesome.scss 这个要装否则很多图标无法显示，安装方法
npm install less less-loader css-loader style-loader file-loader font-awesome --save
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons
应用篇
解决 el-card 与 vxe-table同时使用，可能会出现双线问题。
解决方法：
<el-row>
<el-col :span="24" class="tableTest">
<!--与 el-card 有冲突，会导致table右侧border线变为双线的问题可以使用如下方式解决-->
<vxe-table
border
highlight-hover-row
show-overflow
:align="allAlign"
:data="tableData">
<vxe-table-column type="id" width="60"></vxe-table-column>
<vxe-table-column field="username" title="姓名"></vxe-table-column>
<vxe-table-column field="nickName" title="昵称"></vxe-table-column>
<vxe-table-column field="phone" title="手机"></vxe-table-column>
</vxe-table>
</el-col>
</el-row>
常用设置表单的案例
<template>
<el-card shadow="never">
<!-- 案例 -->
<!--高亮行 highlight-hover-row-->
<!--高亮行 allAlign left center right-->
<!--size三种设置-->
<!--设置大小为 medium，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px-->
<!--设置大小为 medium，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px-->
<!--设置大小为 small，默认大小：Table 40px 、Button 30px、Input 30px、Checkbox 14px、Radio 14px-->
<!--设置大小为 mini，默认大小：Table 36px 、Button 28px、Input 28px、Checkbox 14px、Radio 14px-->
<!--
序号标志：<vxe-table-column type="seq" width="60"></vxe-table-column>
:seq-config="{startIndex: 10000}" 序号设置
-->
<!--
部分固定列宽，其余自适应 width="60"
设置固定和最小宽，实现等比例放大 min-width="60"
设置百分比 width="30%" 都可以
-->
<el-row>
<el-col :span="24" class="tableTest"> <!--与 el-card 有冲突，会导致table右侧border线变为双线的问题可以使用如下方式解决-->
<vxe-table
size="mini"
border
highlight-hover-row
show-overflow
:align="allAlign"
:seq-config="{startIndex: 10000}"
:data="tableData">
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
<vxe-table-column type="id" field="id" title="主键" width="60"></vxe-table-column>
<vxe-table-column field="username" title="姓名" min-width="200"></vxe-table-column>
<vxe-table-column field="nickName" title="昵称" width="150"></vxe-table-column>
<vxe-table-column field="phone" title="手机"></vxe-table-column>
</vxe-table>
</el-col>
</el-row>
</el-card>
</template>
<script>
import systemUserApi from '@/api/system/user'
export default {
data () {
return {
allAlign: null,
loading: true,
tableData: [{
"id": 1,
"username": "admin",
"nickName": "顶级管理员",
"phone": null,
"password": "******",
"isEnable": true,
"isDelete": false,
"updateUserName": "admin",
"createTime": "2020-05-15 16:21:02",
"updateTime": "2020-05-18 17:19:13",
"roles": [{
"userId": 1,
"roleId": 1,
"roleName": "顶级管理员"
}]
}, {
"id": 2,
"username": "test001",
"nickName": "test001",
"phone": null,
"password": "******",
"isEnable": true,
"isDelete": false,
"updateUserName": "admin",
"createTime": "2020-05-18 17:23:53",
"updateTime": "2020-05-18 17:23:53",
"roles": [{
"userId": 2,
"roleId": 2,
"roleName": "测试"
}]
}]
}
},
created () {
this.loading = true
// systemUserApi.list(this.listQuery).then(res => {
// this.tableData = res.data || []
// this.loading = false
// }).catch(() => this.loading = false);
},
methods: {
}
}
</script>
<style scoped>
.tableTest{
margin: 0.5px;
}
</style>