【经验与坑】VueJs使用vxe-table构建复杂表格

码农智涵的程序人生 2021-07-20

2514

环境：VueJs

依赖：vxe-table

需求：

第一种设计（不适用移动端的显示）

近一月数据统计

序号

日期

发生次数

能量统计

破坏类型

严重程度

台站工况

大能量

小能量

剪切

张拉

混合

严重

一般

轻微

在线

离线

网速

存储

在官网找到了一个合适的修改demo。

通过实例代码分析

//创建一列
<vxe-table-column></vxe-table-column>

//创建一个列组 搭配上面的标签一起使用
<vxe-table-colgroup></vxe-table-colgroup>

再分析一下 table 中的属性

border：表格的边框
```
<vxe-table :data="tableData"  border=true></vxe-table>
```
有三种形式
border=none ：去掉外部边框
border=true ：显示所有边框
border=false（缺省值） :只显示外边框
resizable：启用列宽拖动功能
其他的都是Vue中绑定的Js逻辑操作函数

那么现在开始实现第一种表格的样式

template：

<vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height="800"
        align="center"
        :column-config="{width:90}"
        :footer-method="footerMethod"
        :data="tableData"
    >
          <!--   最顶层栏   -->
      <vxe-colgroup title="近一月数据分析">
        <vxe-column field="a" title="序号"></vxe-column>
        <vxe-column field="b" title="日期"></vxe-column>
        <vxe-column field="c" title="次数"></vxe-column>
        <vxe-colgroup title="能量统计">
          <vxe-column field="d" title="大能量"></vxe-column>
          <vxe-column field="e" title="小能量"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="破坏类型">
          <vxe-column field="f" title="剪切"></vxe-column>
          <vxe-column field="g" title="张拉"></vxe-column>
          <vxe-column field="h" title="混合"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="严重程度">
          <vxe-column field="i" title="严重"></vxe-column>
          <vxe-column field="j" title="一般"></vxe-column>
          <vxe-column field="k" title="轻微"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="台站工况">
          <vxe-column field="l" title="在线"></vxe-column>
          <vxe-column field="m" title="离线"></vxe-column>
          <vxe-column field="n" title="网速"></vxe-column>
          <vxe-column field="o" title="存储"></vxe-column>
        </vxe-colgroup>
      </vxe-colgroup>
    </vxe-table>

Js:

export default {
  name:"Table",
  data(){
    return {
      tableData:[],
    }
  },


  created() {
    this.loadList();
  },


  methods:{
    loadList(){
      const list=[];
      for (let index=0;index<15;index++){
        list.push({
          a:'a'+index,
          b:'b'+index,
          c:'c'+index,
          d:'d'+index,
          e:'e'+index,
          f:'f'+index,
          g:'g'+index,
          h:'h'+index,
          i:'i'+index,
          j:'j'+index,
          k:'k'+index,
          l:'l'+index,
          m:'m'+index,
          n:'n'+index,
          o:'o'+index,
        })
      }
      this.tableData = list;
    },


    footerMethod ({  }) {
      return [
      ]
    }
  }

简简单单，非常的朴实无华。

第二种设计（适用于移动端）

表格与移动端可以算是天生的不适合，那么如何灵活的应变呢？从布局的角度考虑，一旦表格列过多，那么在移动端app如此窄的宽度内显然是非常不美观也不方便的。

那么在上网浏览其他大神的解决方案的过程中，从这里得到了一些灵感。

手机端表格设计
https://zhuanlan.zhihu.com/p/30382597

那么我的想法就是利用 mint-ui 中的 <mt-tabcontianer>组件将表格进行拆分细化成几个不同的分表。

下面实现一个测试demo实验一下效果。

代码仓库：

https://github.com/Han56/vxe-table-test

程序也在不断地完善中，如果各位读者有兴趣也可以一同探讨。

数据库

文章转载自码农智涵的程序人生，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

【经验与坑】VueJs使用vxe-table构建复杂表格

评论