记录vue+elementUI table的组件

 可展示图片，

可使用slot插槽添加逻辑，

循环表cloumn，

循环添加操作配置actionButtons

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="selectChange"
      :row-style="{ height: '80px' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :width="item.width"
        :fixed="item.fixed"
        :type="item.type"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        :align="item.align || 'center'"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <!-- 如果是索引列，显示行号 -->
          <span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>

          <!-- 如果是图片列，展示图片 -->
          <span v-else-if="item.prop === 'fileThumb'">
            <img
              v-if="scope.row[item.prop]"
              :src="scope.row[item.prop]"
              alt="图片"
              style="width: 50px; height: 50px; object-fit: cover"
            />
            <!-- <img v-else :src="
            " alt=""> -->
          </span>

          <!-- 其他列使用自定义插槽或者默认值 -->
          <slot
            v-else
            :name="item.prop"
            :scope="scope.row"
            :index="scope.$index"
          >
            <span>
              {{ item.slot ? item.slot(scope.row) : scope.row[item.prop] }}
            </span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="200">
        <template v-slot="scope">
          <el-button
            v-for="(btn, index) in actionButtons"
            :key="index"
            :type="btn.type"
            :size="btn.size"
            @click="btn.action(scope.row)"
          >
            {{ btn.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

 大致使用：

使用    /
/ 表格cloumn
      tableColumn: [
        { type: "index", label: "序号", fixed: "left" },
        {
          prop: "sourceName",
          label: "素材名称",
          fixed: "left",
        },
        {
          label: "缩略图",
          prop: "fileThumb",
        },
        {
          prop: "createTime",
          label: "创建时间",
        },
        {
          prop: "updateBy",
          label: "删除人",
        },
        {
          prop: "updateTime",
          label: "删除时间",
        },
        {
          prop: "sourceType",
          label: "素材格式",
          slot: (row) => {
            const stage = this.dict.type.resource_type;
            if (stage.length > 0) {
              const result = stage.find((item) => item.value == row.sourceType);
              return result?.label;
            }
          },
        },
        {
          prop: "sourceSubject",
          label: "专题分类",
          slot: (row) => {
            const stage = this.dict.type.resource_subject;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourceSubject
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourceGrade",
          label: "适用年级",
          slot: (row) => {
            const stage = this.dict.type.resource_garde;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourceGrade
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourcePlatform",
          label: "适用平台",
          slot: (row) => {
            const stage = this.dict.type.resource_platform;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourcePlatform
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourceScene",
          label: "适用场景",
          slot: (row) => {
            const stage = this.dict.type.resource_scene;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourceScene
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourceLabel",
          label: "备注标签",
        },
      ],
      // 操作按钮配置
      actionButtons: [
        {
          label: "恢复",
          type: "text",
          size: "small",
          action: this.recovery,
        },
        {
          label: "清除",
          type: "text",
          size: "small",
          action: this.eliminate,
        },
      ],