요소 ui 표 상용 기능: 추가 삭제 다중 선택 페이지 다중 선택 고정 헤더 다중 헤더 합병 행렬 내보내기 등 흔한 수요

<template>
  <div class="table-cooperte">
    <el-table
      :data="tableData"
      stripe
      style="width: 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="width: 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>