Vue/ElementUi–表格组件二次封装

组件整理，早就想整理出来了，太懒，拖到现在~

本篇需要完成的内容：
1、Element-ui 表格组件二次封装
2、配合 Element-ui 分页组件
3、表格高度自适应
本篇大段代码警告~

0. 其它

链接：ECharts/Vue--tooltip显示自动播放与列表无缝滚动
链接：Vue/ElementUi--表格组件二次封装（补充）

1. Element-ui 表格组件二次封装

• 表格组件
  使用elementui组件，表格组件是平时最常用的组件之一了，借鉴了不少优秀的文章，做了二次封装
  官网表格组件

• 使用效果

  

  表格.png

• 二次封装组件（大段代码）

// 建议新建单独组件 --  components/MyEltable/index.vue

• 使用组件

// 组件中引用
import MyEltable from '../../components/MyEltable'

components: { MyEltable },

// 使用组件


// data 属性
data(){
  return{
                loading: false,
                isshow: true,
                tabheight: '100%'， // 表格高度，这里是做了自适应高度，正常是需要写固定值的
                tableHeader: [      // 表头
                    {prop: 'Name', label: '卡号'},
                    {prop: 'LabelType', label: '标签类型'},
                    {prop: 'ObjectType', label: '对象类型'},
                    {prop: 'ObjectValue', label: '对象值'},
                    {
                        prop: 'Enable', label: '是否启用', isok: '1', formatData: function (val) {
                            return val == true ? '启用' : '禁用'
                        }
                    },
                 // 如果后端传过来的值不是我们所预期的，此处可以如下判断修改，isok是是否需要渲染为el-tag,效果为下图
                    {  
                        prop: 'Protect', label: '是否设防', isok: '1', formatData: function (val) {
                            return val == true ? '设防' : '未设防'
                        }
                    },
                  // 此处为操作栏，不需要可以删除，clickFun绑定此操作按钮的事件
                    {
                        prop: 'oper', label: '操作', fixed: 'right', minWidth: '160px', width: '160px',
                        oper: [
                            {name: '修改', style: 'primary', clickFun: this.handleClick},
                            {name: '删除', style: 'danger', clickFun: this.delClick},
                        ]
                    }
                ],
                tableData: [],
   }
}

• 表格效果

  

  表格效果

• 使用细节

  • 1、data 中重要的数据属性 tabheight：表格高度，tableHeader：表头设置，tableData：表格数据

  • 2、全选是否需要？isshow 判断，true为需要，false为不需要

  • 3、如果后端传过来的值不是我们所预期的，可以判断修改，isok 为是否需要渲染为el-tag

  //  tableHeader 属性中
   {
         prop: 'Enable', label: '是否启用', isok: '1', formatData: function (val) {
             return val == true ? '启用' : '禁用'
        }
   },
  

2. 配合 Element-ui 分页组件

• 分页组件
  分页组件的使用需要看个人需求，可以单独写，也可以抽出来做二次封装，我这里就单独用了
  链接：官网分页组件

• 效果

  

  分页组件

• 使用

        
        

// data 属性
data(){
   return{
        currentPage: 1,
        total: null,
        pagesize: 15,
  }
}

数据请求及赋值

3. 表格高度自适应

• 当页面高度发生变化时，自动改变表格高度，做到自适应
  有意思的是，我在整理这篇的时候刚好看到一篇同样写这个的文章
  链接：Vue 自适应高度表格
  文章写的很不错，虽然可以不用这样就能实现表格自适应，但是可以当作学习如何自己创建一个组件，值得一说的是，我最初也是获取dom高度，然后动态给表格组件赋高度，都没想过直接用css控制，本来也是打算把那个整理出来的，但是现在珠玉在前，就算了。

• css 方式，实现表格自适应

具体没什么代码，主要思路是：给表格父元素 height:100% ，具体有几层父级看个人代码，只要保证所需要区域高度为 100% 就可以，需要去除某些高度的时候 父元素height: calc(100% - 按钮和间距的高度)，最后给表格100%，就像上面的代码，我给tabheight属性100%；

• 实现

  

  表格自适应.gif

4. 结束

多向他人学习，才能成长的更快。

点个赞呗！