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>

<style scoped>
  .tableTest{
    margin: 0.5px;
  }
</style>

常用设置表单的案例

<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>