vue elementui secondary packaging el-table with slot problem

<template>
  <div
    v-loading="loading">
    <el-table
      ref="tableData"
      :stripe="stripe"
      :height="height"
      :max-height="maxHeight"
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :size="tableSize"
      :data="data"
      @selection-change="handleSelectionChange"
      @current-change="handleTableCurrentChange"
      @row-click="handleTableRowClick"
      v-bind="otherConfig">
      <template v-for="(p, index) in columns">
        <!-- Select box -->
        <el-table-column
          v-if=""
          type="selection"
          width=" ?  : 50"
          :fixed=""
          align="center"
          :key="index"
        ></el-table-column>
        <!-- Serial number -->
        <el-table-column
          v-else-if=""
          type="index"
          width=" ?  : 80"
          label="Serial Number"
          :index=""
          :key="index"
        ></el-table-column>
        <!-- Multi-level header -->
        <el-table-column
          v-else-if=""
          align="center"
          :label=""
          :key="index"
        >
          <el-table-column
            v-for="(child, childIndex) in "
            :key="childIndex"
            v-bind="child"
          >
          </el-table-column>
        </el-table-column>
        <!-- Custom content -->
        <el-table-column
         v-else-if=""
         :label=""
         :key="index">
        <slot
          :name=""
          :fixed=""></slot>
        </el-table-column>
        <!-- General fields -->
        <el-table-column
          v-else
          :prop=""
          :width=""
          :label=""
          :key="index"
        ></el-table-column>
      </template>
    </el-table>
    <!-- eslint-disable -->
    <el-pagination
      v-if="isPaginationShow && "
      class="opagination mt12"
      background
      layout="sizes, prev, pager, next"
      :page-sizes="[10, 20, 50, 100]"
      :=""
      :page-size=""
      :total=""
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'AppTable',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => ({})
    },
    isPaginationShow: {
      type: Boolean,
      default: true
    },
    tableSize: {
      type: String,
      default: 'small'
    },
    stripe: {
      type: Boolean,
      default: true
    },
    otherConfig: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {
    // Switch page numbers    handleCurrentChange () {
      this.$emit('getData')
    },
    // Switch the number of bars per page    handleSizeChange (value) {
      // Both current-page and page-size support .sync modifier. If you use the .sync modifier, you do not need to manually assign values ​​to       = value
      this.$emit('getData')
    },
    // Switch selection    handleSelectionChange (val) {
      this.$emit('changeSelection', val)
    },
    // Single choice    handleTableCurrentChange (currentRow) {
      this.$emit('changeCurrent', currentRow)
    },
    // Click on Line    handleTableRowClick (currentRow) {
      this.$emit('rowClick', currentRow)
    }
  },
  watch: {
    data () {
      // Table scrolls to top when re-requesting data      this.$.$ = 0
    }
  }
}
</script>

<template>
  <div class="hello">
   <app-table
      :columns="columns"
      :data="tableList"
      :pagination="pagination"
      @getData="fetchTableList"
      :loading="loading"
   >
        <template slot="action"
          slot-scope="scope">
          <el-button
            type="text"
            @click="showDetail()">check the details</el-button>
        </template>
   </app-table>
  </div>
</template>

<script>
// Introduce subcomponent formimport AppTable from '@/components/'
export default {
  name: 'HelloWorld',
  components: { AppTable },
  data () {
    return {
      loading: false,
      columns: [
        { selection: true },
        { type: 'index' },
        {prop: 'name', label: 'name', width: 160},
        { slot: 'action', label: 'operate' }
      ],
      tableList: [{}],
      pagination: {
        current: 1,
        size: 10,
        total: 100
      }
    }
  },
  methods: {
    fetchTableList () {
    // Trigger form data request during paging    ()
    }
  }
}
</script>

<el-row :gutter="0">
        <el-col :span="12">
          <all-titlebox :msg="tableViewMsg" type="lable_b"></all-titlebox>
        </el-col>
        <el-col :span="12" class="all-t-r btn-box">
          <el-button size="medium" v-if="showAddButton" @click="addData()"
            >New</el-button
          >
          <slot name="topOperation"></slot>
          <all-dropdownsetting
            v-if="showDropdownsetting"
            :list="checkList"
            :colums="showColums"
            @checkedChange="checkedChange($event)"
          ></all-dropdownsetting>
        </el-col>
      </el-row>
      <!-- Operation bar start -->
      <!-- Dividing line start -->
      <el-row :gutter="0">
        <el-col :span="24" class="all-m-t-10">
          <div class="all-primary-line"></div>
        </el-col>
      </el-row>
      <!-- Dividing line end -->
      <el-row :gutter="0">
        <el-col :span="24" class="table-main">
          <itl-table ref="table" :colums="colums" :tableData="tableData" :operationData="operationData" v-bind="$attrs" v-on="$listeners">
            <template v-if="$" v-slot:operation="props">
              <slot name="operation" v-bind="props"></slot>
            </template>
            <template v-for="item in colums" v-slot:[]="props">
              <slot :name="" v-bind="props"></slot>
            </template>
          </itl-table>
        </el-col>
      </el-row>

 <template v-for="item in colums" v-slot:[]="props">
   <slot :name="" v-bind="props"></slot>
 </template>

<table-view
      table-view-msg="Contract Template Management"
      ref="table-view"
      :table-colums="tableColums"
      :table-data="table"
      add-router="/contract/contrac-template/template-edit"
      :selection='true'
      :showAllSelect="false"
      @view="viewDetail($event)"
      @edit="editData($event)"
      @del="deleteData($event)"
      @page-change="currentChange($event)"
      @size-change="sizeChange($event)"
      :total="total"
      :filter-page-sizes="filterPageSizes"
    >
      <div slot="template-type" slot-scope="{ row }">
        {{ getType() }}
      </div>
      <div slot="template-status" slot-scope="{ row }">
        {{ getStatus() }}
      </div>
      <!--operationSlot usage example -->
      <!-- <div slot="operation" slot-scope="{ row }">
        <el-button
          type="text"
          size="small"
          >{{}}</el-button
        >
      </div> -->
    </table-view>

<!-- Basic table components -->
    <div class="ITL-table">
      <el-row :gutter="0">
        <el-col :span="24" class="all-m-t-20 table-main">
          <!-- Table area start -->
          <el-table
            ref="table"
            :data="tableData"
            :stripe="true"
            tooltip-effect="light"
            highlight-current-row
            :header-cell-class-name="cellClass"
            v-bind="$attrs"
            v-on="$listeners"
            @row-click="handleRowClick"
          >
            <el-table-column
              type="selection"
              :width="55"
              v-if="selection"
            />
            <el-table-column
              type="index"
              :width=" || 'auto'"
              :label=""
              v-if=""
            />
            <el-table-column
              v-for="item in colums"
              :key=""
              :label=""
              :align=" || 'left'"
              :width=" || 'auto'"
              :min-width=" ?  : minWidth"
              :fixed=" || false"
              :show-overflow-tooltip="
                 === undefined ? tooltip : 
              "
              :formatter=""
              :type=""
            >
              <template slot-scope="{ row, $index }">
                <span v-if="">{{ (row, dictList) }}</span>
                <slot v-else-if="" :name="" :row="row" :index='$index' />
                <span v-else>{{ row[] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="(operationData).length || $ || $"
              label="operate"
              :width="operationWidth"
              align="center"
              :fixed="operationFixed"
            >
              <div class="operation-row" slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  v-if=" && "
                  @click="edit(scope)"
                  >{{  || 'edit' }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if=" && "
                  @click="view(scope)"
                  >{{  || 'Check' }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if=" && "
                  @click="del(scope)"
                  >{{  || 'delete' }}</el-button
                >
                <slot name="operation" :row="" :index="scope.$index"></slot>
              </div>
            </el-table-column>
          </el-table>
          <!-- Table area end -->
          <!-- Pagination area start -->
          <div class="pagination all-t-r all-m-t-10" v-if="paginationShow">
            <el-pagination
              :=""
              :page-sizes="pageSizes"
              :=""
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @current-change="$currentChange($event)"
              @size-change="$sizeChange($event)"
            >
            </el-pagination>
          </div>
          <!-- Pagination area end -->
        </el-col>
      </el-row>
    </div>

  <itl-table ref="resumeTable" :paginationShow="false" @view="sendResume" :noHandleRowClick="true" :colums="colums" :tableData="resumeList" @selection-change="onSingleSelection" :showAllSelect="false" :operationData="operationData" :serialNumber="{show:false}" :selection="true">
   <span slot="orgName" class="selectRow" slot-scope="scope" @click="getCompanyIntroduciton()">
       <span>{{  }}</span>
   </span>
   <span slot="postName" class="selectRow" slot-scope="scope"         @click="announceClick()">
      <el-tooltip effect="light" placement="top">
          <div slot="content" v-html=""></div>
              <span>{{  }}</span>
       </el-tooltip>
    </span>
 </itl-table>