第10节:完成列表数据后台调用、搜索、分页功能

摘要:查询重置import{useFormData}from'@/utils/form-data.js'//自定义事件constemit=defineEmits(['search']

查询重置import { useFormData } from '@/utils/form-data.js'// 自定义事件const emit = defineEmits(['search']);// 解构表单等const { form, resetFields } = useFormData({username: '',phone: '',sex: void 0,});//性别选项const selectOpt = [{ value: 1, label: '男' },{ value: 2, label: '女' },{ value: 3, label: '保密' }]//搜索const search = => {//注意,这里一定要展开,主要目的是将响应式转换为普通对象emit('search', {...form})}//重置const reset = => {//表单重置resetFields//刷新列表search}.search-height {line-height: 50px;}.el-form-item {margin-bottom: 0 !important;} 新增删除保密正常禁用{{ row.createTime }}编辑删除import { reactive, onMounted } from 'vue'import { Delete, Plus } from '@element-plus/icons-vue'import UserSearch from './components/user-search.vue'import { pageUser } from '@/api/user/index.js'import { ElMessage } from 'element-plus'const tableData = reactive({page: 1, //当前默认页total: 0, //模拟,总记录数pageSize: 10, //每页记录数list: , //用户数据列表});//Dom挂载后获取数据onMounted( => {getUserList})//重新加载const reload = (form) => {getUserList(form)};//获取分页数据const getUserList = (objData) => {pageUser({ page: tableData.page, pageSize: tableData.pageSize, ...objData}).then((res) => {//console.log(res)tableData.total = res.total;tableData.list = res.list;}).catch((e) => {return e && ElMessage.error(e.message)})};//跳转导航const currentChange = (pageNum) => {tableData.page = pageNumgetUserList}.left-6 {margin-left: 6px;}.table-footer {padding-top: 10px;box-sizing: border-box;display: flex;align-items: center;}.pagination {margin: 0 auto;flex-wrap: wrap;justify-content: center;}.el-table__header {background-color: #f0f0f0;}

来源:浩宇教育

相关推荐