主题
ElementPlus
二次封装的业务组件
Pagination 分页
基础用法
Total 30
- 1
- 2
- 3
<template>
<Pagination :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize" @paginationChange="fetchData" />
</template>
<script setup>
import Pagination from '@/components/Pagination.vue';
import { ref } from 'vue';
const total = ref(30);
const pageSize = ref(10);
const currentPage = ref(1);
const fetchData = (page) => {
console.log(page);
};
</script>
<route lang="json5">
{
meta:{
title: 'Pagination 分页',
order: 7
},
}
</route>- 属性（Props）
| 属性名 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| total | 总条目数 | number | — | 是 |
| currentPage | 当前页码（双向绑定） | number | 1 | 否 |
| pageSize | 每页条目数（双向绑定） | number | 10 | 否 |
- 事件（Emits）
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| paginationChange | 页码或每页条数变化时触发 | { page: number, pageSize: number } |
Table 表格
基础用法
<template>
<Table width="100%" :data-list="tableData" :columns="columns" :loading="loading">
<template #status="{ scope }">
<el-tag disable-transitions>{{ scope.row.status }}</el-tag>
</template>
<template #actions="{ scope }">
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
</template>
</Table>
</template>
<script setup>
import Table from '@/components/Table.vue';
import { ref } from 'vue';
const loading = ref(false);
const tableData = ref([
{
name: 'yyp',
email: '46384294@qq.com',
status: '待办',
},
{
name: '测试超出容器测试超出容器测试超出容器测试超出容器测试超出容器',
email: '46384294@qq.com',
status: '待办',
},
{
name: 'yyp',
email: '46384294@qq.com',
status: '待办',
},
]);
const columns = [
{ prop: 'name', label: '名称' },
{ prop: 'email', label: '邮箱' },
{ prop: 'status', label: '状态', type: 'slot' },
{ prop: 'actions', label: '操作', type: 'slot' },
];
const handleEdit = (row) => {
console.log('编辑', row);
router.push('/front/solve');
};
</script>
<route lang="json5">
{
meta:{
title: 'Table 表格',
order: 6
},
}
</route>Drawer 抽屉
基础用法
<template>
<div>
<el-button @click="openDraw('rtl')">打开抽屉</el-button>
<el-button @click="openDraw('ttb')">打开抽屉(上到下)</el-button>
<CommonDrawer :direction="direction" ref="customDrawRef">
<template #header><span>抽屉标题</span></template>
<template #default><span>抽屉内容</span></template>
<template #footer>
<span>抽屉底部</span>
</template>
</CommonDrawer>
</div>
</template>
<script setup>
import CommonDrawer from '@/components/CommonDrawer.vue';
import { ref, nextTick } from 'vue';
const customDrawRef = ref(null);
const direction = ref('rtl');
const openDraw = (type = 'rtl') => {
nextTick(() => {
direction.value = type;
customDrawRef.value.open();
});
};
</script>
<route lang="json5">
{
meta:{
title: 'Drawer 抽屉',
order: 2
},
}
</route>
<style lang="scss" scoped></style>Dialog 对话框
基础用法
<template>
<div>
<el-button @click="openDialog">打开对话框</el-button>
<CommonDialog title="自定义对话框" :show-close="false" ref="dialogRef" @onSubmit="onSubmit">
<template #header="{ titleId, titleClass, close }">
<div class="my-header">
<h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
<el-button type="danger" @click="close"> Close </el-button>
</div>
</template>
<div>对话框内容</div>
</CommonDialog>
</div>
</template>
<script setup>
import CommonDialog from '@/components/CommonDialog.vue';
import { nextTick, ref } from 'vue';
const dialogRef = ref(null);
const openDialog = () => {
nextTick(() => {
dialogRef.value.open();
});
};
const onSubmit = () => {
console.log('on submit');
};
</script>
<route lang="json5">
{
meta:{
title: 'Dialog 弹出框',
order: 1
},
}
</route>
<style lang="scss" scoped></style>Loading 指令 加载
基础用法
用户信息：
<template>
<div class="loading-body" v-loading="loading">
<el-button type="primary" @click="getUser">获取用户信息</el-button>
<el-button type="primary" @click="getAllUser">获取所有用户信息</el-button>
<div style="margin-top: 10px">
用户信息：
<span v-if="loading && userList.length === 0">加载中...</span>
<template v-else>
<span v-for="item in userList" :key="item" style="display: inline-block; margin-right: 5px">{{ item }}</span>
</template>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { loading } from '@/hooks/useLoadingRef';
const userList = ref([]);
const getUser = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
userList.value.push('张三');
console.log('getUser请求结束');
}, 2000);
};
const getAllUser = () => {
userList.value = [];
getUser();
loading.value = true;
setTimeout(() => {
loading.value = false;
userList.value.push('李四');
console.log('getAllUser请求结束');
}, 5000);
};
</script>
<style lang="scss" scoped>
.loading-body {
width: 100%;
// min-height: 200px;
}
</style>
<route lang="json5">
{
meta:{
title: 'Loading 全局',
order: 4
},
}
</route>Form 条件搜索
基础用法
1.默认
2.修改按钮名称
3.Actions 功能按钮插槽
4.FormItem 插槽功能
结果查看
<template>
<div class="demo-page">
<div class="title">1.默认</div>
<!--
默认：
1. inline为true
2. 取消按钮自带重置表单功能
3. submit-text默认为搜索
4. cancel-text默认为取消
5. cancel-call-back取消按钮的回调
-->
<CommonForm :form-options="data.options" @submit="submit" />
<div class="title">2.修改按钮名称</div>
<!-- 自定义取消按钮的回调 -->
<CommonForm :form-options="data.options" @submit="submit" submit-text="提交" cancel-text="取消" :cancel-call-back="cancel" />
<div class="title">3.Actions 功能按钮插槽</div>
<common-form ref="commonRef" :form-options="data.options" :inline="false">
<!-- 按钮功能区插槽名称 actions-->
<template #actions="{ form }">
<!-- 使用暴露出来的方法 -->
<el-button type="primary" @click="onSubmit">提交</el-button>
<!-- 使用插槽传递的数据 -->
<el-button @click="submit(form)" type="success">创建</el-button>
<el-button @click="reset" type="danger">重置</el-button>
<el-button @click="cancel">取消</el-button>
</template>
</common-form>
<div class="title">4.FormItem 插槽功能</div>
<common-form :form-options="data.options2" @submit="submit">
<!-- 插槽名称为自定义的字段名称 -->
<template #fruit="{ item, form, field }">
<el-checkbox-group v-model="form[field]">
<el-checkbox value="pingguo" name="type"> 苹果 </el-checkbox>
<el-checkbox value="lizi" name="type"> 梨子 </el-checkbox>
<el-checkbox value="shanzhu" name="type"> 山竹 </el-checkbox>
</el-checkbox-group>
</template>
</common-form>
<Result :result="result" />
</div>
</template>
<script setup>
import Result from '@/components/Base/Result.vue';
import { deepClone } from 'l-js-fn';
import { reactive, ref } from 'vue';
import CommonForm from '@/components/CommonForm.vue';
const result = ref(null);
const commonRef = ref(null);
const data = reactive({
options: [
{
type: 'input', // 表单项类型 "input" | "password" | "select" | "daterange" | "datepicker" | "slot"
label: '用户姓名',
field: 'username', // 数据的字段
attrs: {
placeholder: '请输入姓名',
},
},
{
type: 'password',
label: '用户密码',
field: 'password',
attrs: {
placeholder: '请输入密码',
showPassword: true,
},
},
],
options2: [
{
type: 'input',
label: '用户姓名',
field: 'username',
attrs: {
placeholder: '请输入姓名',
},
},
{
type: 'select',
label: '状态',
field: 'status',
options: [
{
label: '正常',
value: 0,
},
{
label: '禁用',
value: 1,
},
],
attrs: {
placeholder: '请选择状态',
},
},
{
type: 'slot', // 把类型改成插槽，进行自定义
label: '水果',
field: 'fruit',
},
{
type: 'daterange',
label: '创建时间',
field: 'createTime',
attrs: {
// startPlaceholder: "start time" // 自定义属性
},
},
{
type: 'datepicker',
label: '操作时间',
field: 'opertionTime',
},
],
});
const submit = (form) => {
console.log(form);
result.value = deepClone(form);
};
const onSubmit = () => {
const form = commonRef.value.getFormData();
console.log(form);
};
const cancel = () => {
console.log('取消');
};
const reset = () => {
commonRef.value.reset();
};
</script>
<route lang="json5">
{
meta:{
title: 'Form 表单',
order: 3
},
}
</route>Tabs 标签页
基础用法
抽屉组件
弹窗组件
<template>
<tabs v-model="activeTab" :menu-list="tabList"></tabs>
</template>
<script setup lang="ts">
import Tabs from '@/components/Tabs.vue';
import { ref, defineAsyncComponent } from 'vue';
const tabList = [
{
label: '抽屉组件',
name: 'drawer',
component: defineAsyncComponent(() => import('./drawer-demo.vue')),
},
{
label: '弹窗组件',
name: 'dialog',
component: defineAsyncComponent(() => import('./dialog-demo.vue')),
},
];
const activeTab = ref(tabList[0].name);
</script>
<route lang="json5">
{
meta:{
title: 'Tabs 标签页',
order: 5
},
}
</route>