element Plus 表格嵌套其他组件的使用

 <!-- 内容 -->
//这里我用的是带有复选框的表格

    <div class="content">
      <div style="width: 95%; margin-left: 2.5%; border: 0.01px solid #e6e6e6">
        <el-table
          ref="multipleTableRef"
          :data="tableData.slice((page - 1) * limit, page * limit)"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="30" align="center" />
          <el-table-column
            property="name"
            label="活动名称"
            min-width="150"
            align="center"
          />
          <el-table-column label="活动图片" min-width="150" align="center">

//这里插入了图片回显的组件需要用到   template 相当于div给内部开辟了一片空间
// #default="scope" 相当于一个标识，让表格组件识别到它是第几行的
            <template #default="scope">
//  里面直接用组件，如果需要用到数据直接    scope.row.img  代表当前行的img
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.img"
                :zoom-rate="1.2"
                :preview-src-list="[scope.row.img]"
                :initial-index="1"
                fit="cover"
                preview-teleported="true"
              />
            </template>
          </el-table-column>
          <el-table-column
            property="time"
            label="创建时间"
            min-width="190"
            align="center"
          />
          <el-table-column
            prop="address"
            label="操作"
            min-width="190"
            align="center"
          >
            <template #default="scope">
              <el-button
                type="primary"
                round
                @click="compile(scope.row, 1, scope.row.id)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                round
                :plain="true"
                @click="deletes(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>