vue+element+el-table表格简单封装成组件

封装后调用，我的页面是这样的

像那些图片，按钮，和状态这些，都是埋好的具名插槽。配置的时候先传插槽的名字，然后在table组件中对应名字，就形成了，具体看代码，比较详细，

直接复制引用就可以展示，我在props里定义了点默认值，引用时方便理解

<!--
 * @Descripttion: Element Ui Table 表格二次封装
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-05-10 23:07:16
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-05-23 13:59:04
 -->
<template>
  <div>
    <el-table
      ref="dataTable"
      :data="tableData"
      border
      style="width: 100%"
      size="mini"
      stripe
      :height="height"
      highlight-current-row
      @selection-change="selectLine"
    >
      <!-- 多选框 -->
      <el-table-column v-if="selection" type="selection" width="55" :align="align"></el-table-column>
      <!-- 文本数据渲染 -->
      <template v-for="item in tableHead">
        <el-table-column
          v-if="item.columnType==='slot'"
          :prop="item.field"
          :label="item.label"
          :key="item.field"
          :width="item.width"
          :align="align"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope" />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="item.field"
          :label="item.label"
          :key="item.field"
          :width="item.width"
          :align="align"
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "e-table",
  components: {},
  /**
   * @name:
   * @test: test font
   * @msg:
   * @param {
   *  接收参数:
   *      tableHeadConfig           列的名称、接收值     |     Array
   *        label         列的名称                      |     String
   *        field         列的对应值                    |     String
   *        columnType    定义当前列为插槽    |   slot   |     String
   *        slotName      定义当前列插槽的名字           |     String
   *        width         定义当前列的宽度               |     String
   *  示例：配置
   *      tableHeadConfig:[
   *              {
   *                label       : "缩略图",
   *                field       : "skuName",
   *                columnType  : "slot",
   *                slotName    : "thumbnail",
   *                width       : 240
   *              }
   *            ]
   *
   *      tableLoadData     异步获取的table文本数据信息
   *      align             表格单元格内容排列顺序      left|center|right
   *      selection         表格是否可多选
   *      height            表格默认撑开高度
   *  事件：
   *      获取当前选中行
   *      调用页面用  @selectLine="xxx" 进行监听处理
   * }
   * @return:
   */
  props: {
    tableHeadConfig: {
      type: Array,
      default: () => {
        return [
          {
            label: "skuId",
            field: "skuId"
          },
          {
            label: "商品名称",
            field: "skuName"
          },
          {
            label: "缩略图",
            columnType: "slot",
            slotName: "thumbnail"
          },
          {
            label: "库存数量",
            field: "onStockNum"
          },
          {
            label: "码类型",
            field: "hasUniCode"
          },
          {
            label: "状态",
            field: "status",
            columnType: "slot",
            slotName: "status"
          },
          {
            label: "操作",
            columnType: "slot",
            slotName: "operation"
          }
        ];
      }
    },
    tableLoadData: {
      type: Array,
      default: () => {
        return [
          {
            skuId: "111",
            skuName: "222"
          }
        ];
      }
    },
    align: {
      type: String,
      default: "center"
    },
    selection: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: 600
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    selectLine() {
      if (
        this.$refs.dataTable.selection &&
        this.$refs.dataTable.selection.length > 0
      ) {
        this.$emit('selectLine',this.$refs.dataTable.selection);
      }
    }
  },
  computed: {
    tableData() {
      return this.tableLoadData;
    },
    tableHead() {
      return this.tableHeadConfig;
    }
  }
};
</script>
<style lang="scss" scope>
// 点击的时候添加的class样式
.el-table__body tr.current-row > td {
  // background-color: #69A8EA !important;
  background-color: #1f2d3da1 !important;
  color: #fff;
}
</style>

把上面代码复制粘贴成组件，这是上面展示图片页面的代码：注意：我用了scss，如果因为这个可以删除style

<!--  -->
<template>
  <div class>
    <e-table :tableHeadConfig="tableHeadConfig" :tableLoadData="tableLoadData">
      <template v-slot:status="slotData">
        <el-tooltip
          :content="slotData.data.row.status | tooltipTitle"
          :popper-class="slotData.data.row.status | tooltipClass"
          placement="right"
        >
          <el-switch
            @change="handleStatusChange(slotData.data.row.status)"
            :active-value="0"
            :inactive-value="1"
            active-color="#67C23A"
            inactive-color="#909399"
            v-model="slotData.data.row.status"
          ></el-switch>
        </el-tooltip>
      </template>
      <template v-slot:operation="slotData">
        <el-button type="success" size="mini">分配角色</el-button>
        <el-button type="primary" size="mini">编辑{{slotData.data.row.level}}</el-button>
        <el-button type="danger" size="mini">删除</el-button>
      </template>
      <template v-slot:sex="slotData">
        <span>{{slotData.data.row.gender | sexFilter}}</span>
      </template>
      <template v-slot:thumbnail="slotData">
        <el-image
          style="width: 60px; height: 30px"
          :src="slotData.data.row.headImg || 'http://www.bocaibao.com.cn/images/1shouye_logo.png'"
          :preview-src-list="[slotData.data.row.headImg]"
        ></el-image>
      </template>
    </e-table>
  </div>
</template>

<script>
import eTable from "你的路径啊";
export default {
  name: "",
  components: {
    eTable
  },
  props: {},
  data() {
    return {
      // 配置
      tableHeadConfig: [
        {
          label: "ID",
          field: "id"
        },
        {
          label: "账号",
          field: "account"
        },
        {
          label: "姓名",
          field: "name"
        },
        {
          label: "性别",
          columnType: "slot",
          slotName: "sex"
        },
        {
          label: "头像",
          columnType: "slot",
          slotName: "thumbnail"
        },
        {
          label: "昵称",
          field: "nickName"
        },
        {
          label: "手机号码",
          field: "mobilePhone"
        },
        {
          label: "等级",
          field: "level"
        },
        {
          label: "状态",
          columnType: "slot",
          slotName: "status"//一定要对应好上面的状态的slot名字
        },
        {
          label: "操作",
          columnType: "slot",
          slotName: "operation",
          width: 260
        }
      ],
      // 数据
      tableLoadData: [
        {
          id: "1", //用户ID
          account: "naPb1836757263", //用户账号
          gender: 0, //性别（0：未知；1：男；2：女）
          headImg:
            "http://pic1.win4000.com/wallpaper/2019-01-12/5c39921496cea_270_185.jpg", //用户头像（url）
          mobilePhone: "13703957387", //用户手机号码
          name: "刘邦", //用户姓名
          nickName: "laozhang", //用户昵称
          level: 0, //用户等级
          status: 1 //用户状态
        },
        {
          id: "usr460138499442614272",
          account: "123456d",
          gender: 2,
          headImg:
            "http://pic1.win4000.com/wallpaper/1/547d71dae56ee_270_185.jpg",
          mobilePhone: "13708068294",
          name: "刘五",
          nickName: "五公公",
          level: 88,
          status: 0
        },
        {
          id: "usr460138499442614272",
          account: "123456d",
          gender: 2,
          headImg:
            "http://pic1.win4000.com/wallpaper/1/547d71dae56ee_270_185.jpg",
          mobilePhone: "13708068294",
          name: "刘五",
          nickName: "五公公",
          level: 88,
          status: 1
        },
        {
          id: "usr460138499442614272",
          account: "123456d",
          gender: 1,
          headImg:
            "http://pic1.win4000.com/wallpaper/1/547d71dae56ee_270_185.jpg",
          mobilePhone: "13708068294",
          name: "刘五",
          nickName: "五公公",
          level: 88,
          status: 0
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {},
  filters: {
    tooltipClass(status) {
      if (status == 0) {
        return "success-tooltip";
      } else {
        return "failed-tooltip";
      }
    },
    tooltipTitle(status) {
      if (status == 0) {
        return "正常";
      } else if (status == 1) {
        return "锁定";
      } else {
        return "封停";
      }
    },
    /**
     * @param {
     *      表单性别过滤器
     * }
     */
    sexFilter(sex) {
      if (sex == 1) {
        return "男";
      } else if (sex == 2) {
        return "女";
      } else {
        return "未知";
      }
    }
  }
};
</script>
<style lang="scss">
.success-tooltip {
  background: #67c23a !important;
  color: #ffffff !important;

  .popper__arrow {
    border-right-color: #67c23a !important;

    &::after {
      border-right-color: #67c23a !important;
    }
  }
}

.failed-tooltip {
  background: #909399 !important;
  color: #ffffff !important;

  .popper__arrow {
    border-right-color: #909399 !important;

    &::after {
      border-right-color: #909399 !important;
    }
  }
}
</style>