element表格封装 支持多级表格

businessTable组件

  <el-table ref="vtable" :data="tableData"
                 :reserve-selection="true" 
                border 
                highlight-current-row
                row-key="id"
                @selection-change="selectTableData">
          <!-- 无数据时显示  -->
          <template slot="empty">
              <img v-if="!!emptyText" alt="" src="@/assets/empty.svg">
              <div v-if="!!emptyText" class="table_empty_tip">
                  <p>未查询到相关数据</p>
                  <p>您还没有尝试添加过任何内容.</p>
              </div>
          </template>
          <el-table-column :reserve-selection="true" type="selection"
                           width="50"></el-table-column>
          <!-- 表格列 -->
          <business-table-item :table-column-list="tableColumn"></business-table-item>
      </el-table>

businessTableItem组件

      <el-table-column v-for="(item,index) in tableColumnList" :key="index"
                         :align="item.align" :label="item.name" :prop="item.field"
                         :show-overflow-tooltip="true" :width="item.width">
            {{item.children}}
            <template v-if="item.children">
                <businessTableItem :tableColumnList="item.children"></businessTableItem>
            </template>
            <template v-if="item.isSlot">
                <slot :name="item.field"></slot>
            </template>
        </el-table-column>

使用时调用businesstable组件传入tableColumnList 和tableData