chore: 优化演示代码

This commit is contained in:
xiaoxian521
2024-01-11 01:53:32 +08:00
parent 81552e0261
commit 9d965a7c63
22 changed files with 77 additions and 88 deletions

View File

@@ -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>

View File

@@ -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('/')"

View File

@@ -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('/')"

View File

@@ -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('/')"

View File

@@ -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"

View File

@@ -33,7 +33,7 @@ function tabClick({ index }) {
<el-alert
title="高级用法中所有表格都设置了 row-key 后端需返回唯一值的字段比如id 作用1. 用来优化 Table
的渲染尤其当字段在深层结构中2. 防止拖拽后表格组件内部混乱(拖拽必须设置哦,坑都帮您们踩过啦 ❤️"
的渲染尤其当字段在深层结构中2. 防止拖拽后表格组件内部混乱(拖拽必须设置)"
type="info"
:closable="false"
/>

View File

@@ -71,7 +71,7 @@ export const list = [
{
key: "watermark",
content: rendContent("watermark"),
title: "水印(无法删除的水印哦🤓️)",
title: "水印",
component: Watermark
},
{

View File

@@ -20,7 +20,7 @@ const {
<el-select
ref="selectRef"
v-model="selectValue"
class="w-[160px]"
class="!w-[200px]"
placeholder="请选择"
clearable
multiple

View File

@@ -17,6 +17,7 @@ const {
<el-select
ref="selectRef"
v-model="selectValue"
class="!w-[200px]"
placeholder="请选择"
clearable
>

View File

@@ -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
});
});
});

View File

@@ -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>

View File

@@ -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>
);
}
}

View File

@@ -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>

View File

@@ -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="创建项目">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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" />

View File

@@ -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