一、优化表格
基本上每个PC后台项目都有非常多的这种表格,而这种表格一般都会带有分页功能,如果每个页面都要写一遍分页所需的数据那会非常麻烦,这里我封装了一些js文件方便复用。
// 表格hook
export const useTablePagination = (onRefresh) => {
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const selected = ref([])
function handleSizeChange(val) {
pageSize.value = val
onRefresh()
}
function handleCurrentChange(val) {
currentPage.value = val
onRefresh()
}
function handleSelectionChange(selection) {
selected.value = selection
}
return {
total,
currentPage,
pageSize,
handleSizeChange,
handleCurrentChange,
handleSelectionChange,
selected
}
}
export const useLoading = () => {
const loading = ref(false)
const toggleLoading = (val) => {
loading.value = val
}
return {
loading,
toggleLoading
}
}
使用:
import { useLoading, useTablePagination } from "@/hooks/useTable";
import { useUpload, useDownload } from "@/hooks/useUpload";
const { currentPage, pageSize, total, handleSizeChange, handleCurrentChange } = useTablePagination(onRefresh)
const { loading } = useLoading()
二、弹窗
import {ref} from 'vue'
// 弹窗hook
const title = ref('')
export const useDialogVisible = () => {
const visible = ref(false)
const open = (row) => {
visible.value = true
if (row && row.roleId) {
title.value = '编辑'
} else {
title.value = '新增'
}
}
const close = () => {
visible.value = false
}
return {
visible,
title,
open,
close
}
}
export const useDialogLoading = () => {
const loading = ref(false)
const open = () => {
loading.value = true
}
const close = () => {
loading.value = false
}
return {
loading,
open,
close
}
}
使用:
import { useDialogVisible, useDialogLoading } from '@/hooks/useDialog'
const { visible, title, open, close } = useDialogVisible()
const { loading: dialogLoading, open: dialogLoadingOpen, close: dialogLoadingClose } = useDialogLoading()