vue3 Element ui Plus 表格分页，vue3 el-pagination分页

电脑版发表于：2022/7/21 9:57

其实就是el-pagination控件的使用而已
```
<template>
  <div>
    <el-table :data="tableData" stripe="true" size="small" border="true">
      <el-table-column label="Id" prop="id" width="60" />
      <el-table-column label="宗地位置" prop="landName" />
      <el-table-column label="地块位置" prop="areaposition" />
      <el-table-column label="控规编号" prop="kgnumber" />
      <el-table-column label="供应方式" prop="provideType" />
      <el-table-column label="土地面积" prop="landarea" />
      <el-table-column label="平均容积率'" prop="floorarearatio" />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="200"
      >
        <template #default="{ row }">
          <el-button text type="primary" @click="handleDetail(row)">
            详情
          </el-button>
          <el-button text type="primary" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button text type="primary" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { getList } from '@/api/landInfo'

export default defineComponent({
  name: 'dynamicTable',
  components: {
    LandInfoEdit: defineAsyncComponent(() =>
      import('./components/LandInfoEdit')
    ),
  },
  setup() {
    const state = reactive({
      editRef: null,
      tableData: [],
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      queryForm: {
        pageNo: 1,
        pageSize: 3,
        title: '',
      },
    })

    const fetchData = async () => {
      // const result = await getList()
      // state.tableData = result.data

      const {
        data: { list, total },
      } = await getList(state.queryForm)

      state.tableData = list
      state.total = total
    }
    const handleSizeChange = (val) => {
      state.queryForm.pageSize = val
      fetchData()
    }
    const handleCurrentChange = (val) => {
      state.queryForm.pageNo = val
      fetchData()
    }
    const queryData = () => {
      fetchData()
    }
    const handleEdit = (row) => {
      state['editRef'].showEdit(row)
    }
    onMounted(() => {
      fetchData()
    })

    return {
      ...toRefs(state),
      queryData,
      handleEdit,
      fetchData,
      handleSizeChange,
      handleCurrentChange,
    }
  },
})
</script>
```
接口返回数据的格式如下：
```
{
  "code": 200, //成功的状态码
  "msg": "success", //提示信息
  "data": { //返回数据
      "list": [{}，{}，{}], //返回数组
      "total": 238, //总条数（表格中用到，其它接口可以不返回）
  }
}
```

风清月

vue3 Element ui Plus 表格分页，vue3 el-pagination分页

{{item.title}}

vue3 Element ui Plus 表格 分页，vue3 el-pagination分页

{{item.title}}

vue3 Element ui Plus 表格分页，vue3 el-pagination分页