封装一套 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` 事件，父组件可以通过监听该事件来处理分页逻辑。

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