<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange"> <el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column> <el-table-column slot="actionBar" label="Depth图片" > <div class="item-box"> <img class="pic" :src="baseUrl + 'mgr/file/showImgByPath?imgPath=' + tableData.depthPic" /> </div> </el-table-column> </commonTable>为什么说我的tableData.depthPic无数据

根据您提供的代码，您的表格列中的depthPic数据是从tableData对象中获取的。如果您发现depthPic没有数据，可能有以下几个原因：

1. 数据未正确加载：请确保tableData对象中的depthPic属性有正确的数据。您可以通过打印或调试来检查tableData对象的内容。

2. 数据源错误：请确认baseUrl和imgPath的路径是正确的，可以尝试在浏览器中直接访问该路径来验证是否能正确显示图片。

3. 数据命名错误：请检查您的数据命名是否正确，确保depthPic属性在tableData对象中是正确的属性名。

如果您仍然无法确定问题所在，建议您逐步排查代码，查看各个步骤是否正常运行，并确保数据源和路径设置正确。

相关问题

<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange"> <el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column> <img class="pic" :src="baseUrl + 'mgr/file/showImgByPath?imgPath=' + tableData.depthPic" /> </commonTable> 这个图片展示不出来在组件中，如何让其展示

首先，请确保图片路径 `tableData.depthPic` 是正确的。接下来，您可以尝试使用 `require` 来加载图片，以确保它能在组件中正确展示。

您可以将代码修改为以下形式：

<template>
  <commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">
    <el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column>
    <el-table-column label="图片">
      <template slot-scope="scope">
        <img class="pic" :src="require(baseUrl + 'mgr/file/showImgByPath?imgPath=' + scope.row.depthPic)" />
      </template>
    </el-table-column>
  </commonTable>
</template>

在这个修改后的代码中，我们在 `el-table-column` 组件中添加了一个 `slot-scope` 属性，并在其中使用 `require` 方法来加载图片。这样可以确保图片能够在组件中正确展示。注意，`require` 方法需要传入一个静态的图片路径，所以我们将动态的 `tableData.depthPic` 放在字符串拼接中。

希望这个解决方案能够帮助到您！如果还有其他问题，请随时提问。

封装一套 vue table列表快速开发代码

好的，下面是一份基于 Element UI 的 Vue Table 列表快速开发代码：

<template>
  <div>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
        <template v-if="column.slot" slot-scope="scope">
          <slot :name="column.slot" :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="!tableData.length" class="no-data">暂无数据</div>
    <div class="pagination">
      <el-pagination
        v-if="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueTable',
  props: {
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pagination: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tableData: [],
      loading: false,
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(newVal) {
        this.tableData = newVal
      },
    },
  },
  methods: {
    handlePageChange(currentPage) {
      this.$emit('page-change', currentPage)
    },
  },
}
</script>

<style>
.no-data {
  margin-top: 20px;
  text-align: center;
  color: #ccc;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

使用方法：

1. 在父组件中引入并注册 `VueTable` 组件：

<template>
  <div>
    <vue-table :columns="columns" :data="tableData" :total="total" :current-page.sync="currentPage" @page-change="handlePageChange" />
  </div>
</template>

<script>
import VueTable from './VueTable.vue'

export default {
  name: 'App',
  components: {
    VueTable,
  },
  data() {
    return {
      columns: [
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '年龄',
          prop: 'age',
        },
        {
          label: '性别',
          prop: 'gender',
        },
        {
          label: '操作',
          slot: 'actions',
        },
      ],
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: '男',
        },
        {
          name: '李四',
          age: 22,
          gender: '女',
        },
        {
          name: '王五',
          age: 30,
          gender: '男',
        },
      ],
      total: 3,
      currentPage: 1,
    }
  },
  methods: {
    handlePageChange(currentPage) {
      // 处理分页逻辑
    },
  },
}
</script>

2. 在 `columns` 数组中定义表格列，其中 `label` 表示列名，`prop` 表示对应数据的属性名，`slot` 表示插槽名，如果该列需要使用插槽则需设置该属性。

3. 在 `tableData` 数组中定义表格数据，格式为对象数组，每个对象的属性名应与 `columns` 数组中的 `prop` 属性对应。

4. 可选地设置分页相关的属性，如 `total` 表示数据总数，`pageSize` 表示每页显示的条数，`currentPage` 表示当前页码，`pagination` 表示是否显示分页器。当用户点击分页器时，会触发组件实例的 `page-change` 事件，父组件可以通过监听该事件来处理分页逻辑。

以上代码可根据实际需求进行修改和优化。