vue 简单实用的elementUI表格封装

在写这个表格组件之前，要了解 slot 插槽的使用。

目录

1.子组件：子组件调用父组件的方法 this.$parent.方法名

2.父组件使用

2.1 父组件（普通表格）：

2.2 父组件（表格中的某一项数据需要修改） 

2.3 父组件（带操作列的表格）：

注意：

---

1.子组件：子组件调用父组件的方法 this.$parent.方法名

<template>
  <div id="table"  class="bg pd20">
    <!-- 表格 -->
    <el-table :data="tableData" border class="myTable" :header-cell-style="{background:'#D9FFF2'}" style="width:100%">
      <!-- 表格扩展 -->
      <el-table-column type="expand" width="30">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand clear">
            <template >
              <el-form-item v-for="(info, infoId) in tableInfo" :key="infoId" :label="info.value+'：'"><span>{
  {props.row[info.key]}}：</span></el-form-item>
            </template>
          </el-form>
        </template>
      </el-table-column>

      <!-- 表格内容 -->
      <el-table-column type="index" :index="indexMethod" width="60" label="序号" align="center"/>
      <template v-for="(info, infoIndex) in tableInfo">
        <el-table-column :key="infoIndex" :prop="info.key" :label="info.value" align="center" :min-width="info.minWidth" show-overflow-tooltip >
          <!-- <slot :name="info.key" :data="info" :index="infoIndex"></slot> -->
          <!-- 给插槽命名、传值、序列号，使用插槽时记得传dealData -->
          <template slot-scope="scope">
            <slot :name="info.key" :data="scope.row" :index="infoIndex" v-if="info.dealData"></slot>
            <span v-else>{
  {scope.row[info.key]}}</span>
          </template>
        </el-table-column>
      </template>       

      <!-- 是否需要操作列，默认不需要，需要时父组件设置operateShow，记得传操作这一列的宽度，否则默认宽为200 -->
      <el-table-column v-if="operateShow" label="操作" align="center" :min-width="operateWidth" fixed="right">
        <template slot-scope="scope">