mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
chore: 优化演示代码
This commit is contained in:
@@ -81,10 +81,10 @@ const tableData: User[] = [
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">打印功能(报表、图表、图片)</span>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<el-select
|
||||
v-model="value"
|
||||
class="m-2"
|
||||
class="!w-[100px] mr-2"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
>
|
||||
@@ -121,7 +121,7 @@ const tableData: User[] = [
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Table</p>
|
||||
<p class="font-medium text-lg text-center">Table</p>
|
||||
<el-table
|
||||
border
|
||||
:data="tableData"
|
||||
@@ -135,8 +135,6 @@ const tableData: User[] = [
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-col
|
||||
v-motion
|
||||
:xs="11"
|
||||
@@ -156,7 +154,7 @@ const tableData: User[] = [
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Echart</p>
|
||||
<p class="font-medium text-lg text-center">Echart</p>
|
||||
<pieChart class="echart mt-[10px]" />
|
||||
</el-col>
|
||||
|
||||
@@ -179,11 +177,11 @@ const tableData: User[] = [
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Image</p>
|
||||
<p class="font-medium text-lg text-center">Image</p>
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/44761321?v=4"
|
||||
src="https://pure-admin-utils.netlify.app/logo.png"
|
||||
alt="avatars"
|
||||
class="img mt-[10px] w-[250px] h-[250px] m-auto"
|
||||
class="img mt-[10px] m-auto"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -24,7 +24,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
delay: 80
|
||||
}
|
||||
}"
|
||||
>
|
||||
@@ -41,7 +41,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
delay: 120
|
||||
}
|
||||
}"
|
||||
>
|
||||
@@ -58,7 +58,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
delay: 160
|
||||
}
|
||||
}"
|
||||
@click="router.push('/')"
|
||||
|
||||
@@ -24,7 +24,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
delay: 80
|
||||
}
|
||||
}"
|
||||
>
|
||||
@@ -41,7 +41,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
delay: 120
|
||||
}
|
||||
}"
|
||||
>
|
||||
@@ -58,7 +58,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
delay: 160
|
||||
}
|
||||
}"
|
||||
@click="router.push('/')"
|
||||
|
||||
@@ -24,7 +24,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
delay: 80
|
||||
}
|
||||
}"
|
||||
>
|
||||
@@ -41,7 +41,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
delay: 120
|
||||
}
|
||||
}"
|
||||
>
|
||||
@@ -58,7 +58,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
delay: 160
|
||||
}
|
||||
}"
|
||||
@click="router.push('/')"
|
||||
|
||||
@@ -53,7 +53,7 @@ function onChange() {
|
||||
<span>当前角色:{{ username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-select v-model="username" @change="onChange">
|
||||
<el-select v-model="username" class="!w-[160px]" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
|
||||
@@ -33,7 +33,7 @@ function tabClick({ index }) {
|
||||
|
||||
<el-alert
|
||||
title="高级用法中所有表格都设置了 row-key ,后端需返回唯一值的字段,比如id 作用:1. 用来优化 Table
|
||||
的渲染,尤其当字段在深层结构中;2. 防止拖拽后表格组件内部混乱(拖拽必须设置哦,坑都帮您们踩过啦 ❤️)"
|
||||
的渲染,尤其当字段在深层结构中;2. 防止拖拽后表格组件内部混乱(拖拽必须设置)"
|
||||
type="info"
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
@@ -71,7 +71,7 @@ export const list = [
|
||||
{
|
||||
key: "watermark",
|
||||
content: rendContent("watermark"),
|
||||
title: "水印(无法删除的水印哦🤓️)",
|
||||
title: "水印",
|
||||
component: Watermark
|
||||
},
|
||||
{
|
||||
|
||||
@@ -20,7 +20,7 @@ const {
|
||||
<el-select
|
||||
ref="selectRef"
|
||||
v-model="selectValue"
|
||||
class="w-[160px]"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
multiple
|
||||
|
||||
@@ -17,6 +17,7 @@ const {
|
||||
<el-select
|
||||
ref="selectRef"
|
||||
v-model="selectValue"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
|
||||
@@ -34,8 +34,8 @@ export function useColumns(waterRef: Ref) {
|
||||
font: "16px Microsoft YaHei",
|
||||
globalAlpha: 0.8,
|
||||
forever: true,
|
||||
width: 252,
|
||||
height: 80
|
||||
width: 240,
|
||||
height: 90
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -20,13 +20,13 @@ function tabClick({ index }) {
|
||||
<span class="font-medium">
|
||||
平台二次封装 element-plus 的 Table ,完全兼容 Api
|
||||
并提供灵活的配置项以及完善的类型提醒,再也不用将代码都写在 template
|
||||
里了,欢迎 Star
|
||||
里了
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
@pureadmin/table 源码
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -6,56 +6,51 @@ export function useColumns() {
|
||||
{
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-6">
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
<span class="ml-1 mr-4">您的账户已被冻结</span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="flex items-center"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即解冻
|
||||
<div class="w-full">
|
||||
<div class="flex items-center">
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
icon={CloseCircleLine}
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-8">
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
<span class="ml-1 mr-4">您的账户还不具备申请资格</span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="flex items-center"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即升级
|
||||
<span class="ml-1 mr-4">您的账户已被冻结</span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="flex items-center"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即解冻
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex items-center">
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
icon={CloseCircleLine}
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span class="ml-1 mr-4">您的账户还不具备申请资格</span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="flex items-center"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即升级
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@ const { columns } = useColumns();
|
||||
<PureDescriptions
|
||||
:columns="columns"
|
||||
title="您提交的内容有如下错误:"
|
||||
class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]"
|
||||
class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -41,7 +41,7 @@ const columns = [
|
||||
</div>
|
||||
</template>
|
||||
</el-result>
|
||||
<div class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]">
|
||||
<div class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]">
|
||||
<PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
|
||||
<el-steps :active="2">
|
||||
<el-step title="创建项目">
|
||||
|
||||
@@ -41,7 +41,7 @@ const {
|
||||
v-model="form.name"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:" prop="status">
|
||||
|
||||
@@ -49,7 +49,7 @@ const {
|
||||
v-model="form.name"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识:" prop="code">
|
||||
|
||||
@@ -70,7 +70,7 @@ const {
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码:" prop="phone">
|
||||
@@ -78,7 +78,7 @@ const {
|
||||
v-model="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:" prop="status">
|
||||
@@ -86,7 +86,7 @@ const {
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
|
||||
@@ -86,7 +86,7 @@ function onCloseTags() {
|
||||
<el-divider />
|
||||
<el-tree-select
|
||||
v-model="currentValues"
|
||||
class="w-[300px]"
|
||||
class="!w-[300px]"
|
||||
node-key="uniqueId"
|
||||
placeholder="请选择要关闭的标签"
|
||||
clearable
|
||||
|
||||
Reference in New Issue
Block a user