element UI表单的那些事

身处于大前端的时代，很多业务也逐渐趋向前端。众所周知，前端最费时的就是UI的定制边写，为了提高编码生产率，把时间放到我们的核心业务上，我们往往都会使用一些开源的前端UI框架。例如（Element ui、 Antd 、bootstrap ）等辅助我们进行页面的搭建。 组件虽好，但是如果粗心，不细心看文档，还是会导致一些令人不理解的bug，很影响我们开发的澎湃心情，今天我就以新手视角举例子我们刚上手经常犯的错误进行指出和修正，言语如有失偏颇，仅供大家参考指正。

 

1.element 表单重置

表单重置的方法很多，这里假定你使用的是<el-form><el-form-item label=开始时间"></el-form-item></el-form>这种形式进行开发的，我们新手很可能会忘记对 <el-form :model="formData" ref="form"> 标签上进行红色标注文字的绑定 ，formData就是我们绑定表单的对象，ref就是我们绑定表单的实例，假设这两个绑定上，我们即可在自己重置按钮上 绑定事件，执行 this.$refs["form"].resetFields();进行重置，一般我们表单重置不了的情形，可能都是我们粗心大意了。下面给大家提供一个完整的demo参考，可直接复制粘贴使用

template部分

<el-form label-width="100px" inline size="small" label-position="right" :model="postData" ref="form">

<el-form-item label="申请日期" prop="applyTimeStart">

     <el-date-picker v-model="postData.applyTimeStart" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期">

     </el-date-picker>

</el-form>

<el-button type="default" @click="reset()">重置</el-button>

script部分

export default {
    data() {  
        return {   
            postData: { 
                applyTimeStart: ""
            }
        }
    },
    methods: {  
        reset() {
            this.$refs["form"].resetFields();
        }
    }
}

 

2.element 编辑和新增场景

Vue MVVM设计模式让编辑和新增的更容易复用，此前我还想讲解一下，如何高效率，低代码的复用，但本人第一次写博客，还是很相信各位看官的实力，再次就不鳌述了。

3.element分页

element的分页是一件值得讲的事情，因为我发现工作当中，还有很多前端同学对于分页的概念有些模糊。
刚好在这里跟大家分享一下分页的开发。分页有两种开发选择模式（前端分页、后端分页）。这两种分页模式的最明显的区别就是：
前端分页：
     形式：适用于数据量较少的情况，数据一次性灌入前端，由前端js splice对数据进行切片展示 优点：不需要重复走ajax请求  缺点：如果数据量过大，会导致前端渲染产生性能问题
后端分页：
     形式：适用于数据量较大的情况，数据分批次请求，由前后端约定好的 total（条总数）、pageNum（当前页数）、pageSize（每页数量），根据不同条件进行分批次的请求 优点：每次请求少量数据，不会产生前端性能问题 缺点：走大量的ajax请求

其实在日常的开发中，我们常见的一般都是后端分页，这种更贴合我们大部分的业务实际场景。那么闲言少叙，直接上对应的代码

 

前端分页

template部分：

<el-table
    :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
    style="width: 100%;"
    :empty-text="'暂无数据'"
></el-table>
<pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize" />

script部分

data() {
    return {
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
     
    }
},
methods:{
    getList(){
        ajax().then(res=>{
            this.list = res.data;
            this.total = res.data.length;
        })
    }
}

后端分页

过程实属简单，不在鳌述，鄙人有封装好的成熟组件，可直接点击github链接，https://github.com/Object-wula/element-tech 查看源代码，参考使用

4.element table表格导出下载

表格导出很easy，直接上demo

<template>
  <div class="app-container">
    <el-table :data="list" style="width: 100%;" :empty-text="'暂无数据'" id="out-table">
      <el-table-column label="序号" type="index" align="center" width="80">
        <template slot-scope="scope">
          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" />
    </el-table>
    <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  components: {},
  name: "opt",
  data() {
    return {
      list: [{name:"张正虎",age:12}],
      total: 0,
      pageNum: 1,
      pageSize: 10
    };
  },
  methods: {
    exportExcel(data) {
      /* 从表生成工作簿对象 */
      var xlsxParam = { raw: true };
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#out-table"),
        xlsxParam
      );
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "能量损耗.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
  }
};
</script>

5.element dialog弹框打开数据没更新 不渲染

一般弹框数据未更新的情况，很多同学可能都会产生一定的质疑，明明我的prop变更，但是弹框内的组件却未被赋值，百思不得其解，这时候不用怀疑，肯定是前端童鞋你的代码姿势有问题。闲言少叙，可直接参考我的github 源码 https://github.com/Object-wula/element-tech参考使用，这里我就不上代码了。