element ui表格常用功能如：导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

<template>
  <div class="table-cooperte">
    <el-table
      :data="tableData"
      stripe
      style=" 100%"
      border
      ref="table"
      :span-method="objectSpanMethod"
      tooltip-effect="dark"
      :height="tableHeight"
      :row-style="rowStyleHandel"
      :header-cell-style="{background:'#ff0000',color: '#fff'}"
    >
      <el-table-column label="多级表头使用" align="center">
        <el-table-column prop="date" label="日期" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center" min-width="50"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button @click="handleAdd(scope.row)" type="text" size="small">新增</el-button>
            <el-button @click="handleDel(scope.$index)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-table
      :data="tableData"
      stripe
      style=" 100%"
      border
      ref="table1"
      tooltip-effect="dark"
      :height="tableHeight"
      @selection-change="handleSelect"
      :row-key="row => row.id"
      :header-cell-style="{background:'#333',color: '#fff'}"
    >
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="date" label="日期" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" align="center" min-width="50"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="100">
        <template slot-scope="scope">
          <el-button @click="handleExport(scope.row)" type="text" size="small">导出</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: 400,
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小7",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小9",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小1",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          id: 5,
          date: "2016-05-03",
          name: "王小2",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          id: 6,
          date: "2016-05-03",
          name: "王小3",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      spanArr: [], // 合并数据
      pos: 0, // 合并标记
      multipleList: [], // 选中数据
    }
  },
  created() {
    this.getSpanArr(this.tableData);
  },
  mounted(){
    /*
    stripe 斑马纹属性
    header-cell-style 表头样式
    其他具体属性参照官网api调用
    */
  },
  methods: {
    // 1、row-class-name 类名控制 2、row-style 样式控制
    rowStyleHandel({ row, rowIndex }) {
      // console.log(row,rowIndex)
      if (row.name == "王小7") {
        return "background:#999;color:#ff0000 !";
      }
    },
    // 合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同 可以是data[i][0]和data[i - 1][0]比较或者类推
          if ( data[i].date === data[i - 1].date) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 选中 -- 若要 翻页记忆选中:row-key="row => row.id" 不一定是id可以是唯一属性区别  type="selection"加上:reserve-selection="true" 适用场景：列表页导出、批量操作 不适用于有回显的（新增编辑详情同一组件情况需要特别处理）
    handleSelect(val){
      console.log(val)
      this.multipleList = val;
    },
    // 新增
    handleAdd(row) {
      this.tableData.push(row);
    },
    // 删除
    handleDel(index) {
      this.tableData.splice(index, 1);
    },
    // 导出 -- 设置响应体 responseType: 'blob', 需要先 cnpm i js-file-download -S 安装依赖
    handleExport(row){
      // 接口 返回成功后 写上下面代码  
      this.$message({
        type: 'success',
        message: '导出成功'
      })
      let fileDownload = require("js-file-download");
      // console.log(res.headers['content-disposition'].split("=")[1],'头部')
      fileDownload(res.data,decodeURIComponent(res.headers['content-disposition'].split("=")[1]));
    },
  }
};
</script>

<style>
</style>