<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/ab52cb.md for this page in Markdown format</div>

分析组件

1. 建立组件的模板，先把架子搭起来，命名约定，组件样式，考虑好组件的基本逻辑。
2. 组件的数据输入，即定好 props 里面的数据类型。
3. 组件的数据输出，即对外暴露出来的方法和数据。

例如:

从大到小

<template>
  <el-container class="table_container">
    <slot name="header">
      //
    </slot>

    <el-main class="table_main">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
        :height="height"
        :data="data"
        style="width: 100%"
      >
        <slot name="columnFirst">
          <!-- <el-table-column type="expand">
            <template slot-scope="props">
              //
            </template>
          </el-table-column>-->
        </slot>

        <slot name="columns">
          <template>
            <el-table-column
              v-for="(col, idx) in columns"
              :key="idx"
              :width="col.width"
              :type="col.type"
              :prop="col.prop"
              :label="col.label"
              :formatter="col.formatter"
            >
              <!-- <template slot-scope="scope">
                <component :is="item.temp.tag" :src="scope.row[item.prop]" />
              </template>-->
            </el-table-column>
          </template>
        </slot>

        <slot name="columnOther" />

        <slot name="columnHandler">
          <el-table-column width="100" label="操作">
            <template slot-scope="scope">
             //
          </el-table-column>
        </slot>
      </el-table>
    </el-main>

    <el-footer class="table_pagination">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>