21.element el-table表格以及树形表格封装

21.element el-table表格以及树形表格封装

1.效果图

• 树形表格效果图
  
• 普通表格效果图
  

2.表格组件

组件名称:YpTable.vue
组件内容：当然有其他的需要加的可以自行添加一些其他类型

<template>
  <el-table :data="list" stripe border :default-expand-all="expand" row-key="id" :tree-props="{ children: children }">
    <!-- 循环表格标签以及类型 -->
    <el-row v-for="(item, index) in propArr" :key="index">
      <!-- 当父组件的type值等于'img'表示此列显示图片 -->
      <el-table-column v-if="item.type === 'img'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <img style="width:50px;height:50px" :src="scope.row[props]" alt="" />
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'icon'表示此列显示图标 -->
      <el-table-column v-else-if="item.type === 'icon'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <i :class="scope.row[item.props]"></i>
        </template>
      </el-table-column>
      <!-- 当父组件的type值等于'select'表示此列显示checkbox -->
      <el-table-column v-else-if="item.type === 'select'" type="selection" width="50"> </el-table-column>
      <!-- 当父组件的type值等于'switch'表示此列显示开关 -->
      <el-table-column v-else-if="item.type === 'switch'" :prop="item.props" :label="item.label" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row[item.props]" @change="servicePublishChange(scope.row)"> </el-switch>
        </template>
      </el-table-column>
      &