vue3 + ElementPlus 封装列表表格组件包含分页_Javascript

在前端开发中，封装组件是必不可少的。今天就来封装一个通用的列表表格组件，包含分页功能，可以提高代码的复用性和可维护性。

1. 组件设计

props：

tabledata：表格数据。
columns：表格列配置。
total：总条数。
loading：加载状态。
pagination：分页配置（当前页、每页条数）。

events：

update:pagination：分页变化时触发。
refresh：刷新数据时触发。

slots：

自定义列内容。
自定义操作按钮。

2. 封装代码

tablewithpagination.vue

<template>
  <div class="table-with-pagination">
    <!-- 表格 -->
    <el-table
      :data="tabledata"
      border
      stripe
      v-loading="loading"
      style="width: 100%"
    >
      <!-- 动态列 -->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align || 'center'"
      >
        <!-- 自定义列内容 -->
        <template #default="scope" v-if="column.slot">
          <slot :name="column.slot" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
        v-if="$slots.actions"
        label="操作"
        align="center"
        :width="actionswidth"
      >
        <template #default="scope">
          <slot name="actions" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pagination.pagesize"
      :current-page="pagination.pageno"
      @size-change="handlesizechange"
      @current-change="handlecurrentchange"
    />
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineprops({
  tabledata: {
    type: array,
    default: () => [],
  },
  columns: {
    type: array,
    default: () => [],
  },
  total: {
    type: number,
    default: 0,
  },
  loading: {
    type: boolean,
    default: false,
  },
  pagination: {
    type: object,
    default: () => ({
      pageno: 1,
      pagesize: 10,
    }),
  },
  actionswidth: {
    type: string,
    default: '180',
  },
});
const emit = defineemits(['update:pagination', 'refresh']);
// 分页大小变化
const handlesizechange = (pagesize) => {
  emit('update:pagination', { ...props.pagination, pagesize });
  emit('refresh');
};
// 当前页变化
const handlecurrentchange = (pageno) => {
  emit('update:pagination', { ...props.pagination, pageno });
  emit('refresh');
};
</script>
<style scoped>
.table-with-pagination {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

3. 使用示例

<template>
  <div>
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="queryparams">
      <el-form-item label="任务名称">
        <el-input v-model="queryparams.taskname" placeholder="请输入任务名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlesearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格组件 -->
    <tablewithpagination
      :table-data="tabledata"
      :columns="columns"
      :total="total"
      :loading="loading"
      :pagination="pagination"
      @update:pagination="handlepaginationchange"
      @refresh="fetchdata"
    >
      <!-- 自定义列 -->
      <template #status="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
          {
  { row.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </template>
      <!-- 操作列 -->
      <template #actions="{ row }">
        <el-button type="primary" size="small" @click="handleedit(row)">
          编辑
        </el-button>
        <el-button type="danger" size="small" @click="handledelete(row)">
          删除
        </el-button>
      </template>
    </tablewithpagination>
  </div>
</template>
<script setup>
import { ref, onmounted } from 'vue';
import tablewithpagination from './components/tablewithpagination.vue';
import { fetchtasklist } from '@/api/task'; // 假设有一个获取任务列表的 api
// 表格列配置
const columns = [
  { prop: 'taskname', label: '任务名称' },
  { prop: 'tasktype', label: '任务类型' },
  { prop: 'status', label: '状态', slot: 'status' }, // 使用自定义列
];
// 表格数据
const tabledata = ref([]);
const total = ref(0);
const loading = ref(false);
// 查询参数
const queryparams = ref({
  taskname: '',
});
// 分页参数
const pagination = ref({
  pageno: 1,
  pagesize: 10,
});
// 获取数据
const fetchdata = async () => {
  try {
    loading.value = true;
    const res = await fetchtasklist({
      ...queryparams.value,
      ...pagination.value,
    });
    tabledata.value = res.data.list;
    total.value = res.data.total;
  } catch (error) {
    console.error('获取数据失败：', error);
  } finally {
    loading.value = false;
  }
};
// 分页变化
const handlepaginationchange = (newpagination) => {
  pagination.value = newpagination;
  fetchdata();
};
// 搜索
const handlesearch = () => {
  pagination.value.pageno = 1; // 重置页码
  fetchdata();
};
// 编辑
const handleedit = (row) => {
  console.log('编辑：', row);
};
// 删除
const handledelete = (row) => {
  console.log('删除：', row);
};
// 初始化加载数据
onmounted(() => {
  fetchdata();
});
</script>

父组件中使用 tablewithpagination以上就是封装 vue 3 和 element plus 中封装一个通用的列表表格组件，将表格和分页逻辑封装在一个组件中，便于维护和扩展。

到此这篇关于vue3 + elementplus 封装列表表格组件包含分页的文章就介绍到这了,更多相关vue elementplus封装表格组件内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！