✨(component): 新增 table 组件 loading 属性, 数据加载过渡
This commit is contained in:
就眠儀式
parent
223141a8e7
commit
8b6e71922e
@ -10,7 +10,7 @@ import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref, useSlots, watch } from "vue";
|
||||
import { useI18n } from "../../language";
|
||||
import PasswordIcon from "./svg/Password.vue";
|
||||
import UnPasswordIcon from "./svg/unPassword.vue"
|
||||
import UnPasswordIcon from "./svg/unPassword.vue";
|
||||
|
||||
export interface LayInputProps {
|
||||
name?: string;
|
||||
@ -159,7 +159,11 @@ const showPassword = () => {
|
||||
class="layui-input-suffix-icon"
|
||||
></lay-icon>
|
||||
</span>
|
||||
<span class="layui-input-password" @click="showPassword" v-if="password && hasContent">
|
||||
<span
|
||||
class="layui-input-password"
|
||||
@click="showPassword"
|
||||
v-if="password && hasContent"
|
||||
>
|
||||
<password-icon v-if="isPassword"></password-icon>
|
||||
<un-password-icon v-else></un-password-icon>
|
||||
</span>
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
<template>
|
||||
<svg focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg>
|
||||
</template>
|
||||
<svg
|
||||
focusable="false"
|
||||
class=""
|
||||
data-icon="eye-invisible"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
viewBox="64 64 896 896"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
|
||||
></path>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,16 @@
|
||||
<template>
|
||||
<svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
|
||||
</template>
|
||||
<svg
|
||||
focusable="false"
|
||||
class=""
|
||||
data-icon="eye"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
viewBox="64 64 896 896"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@ -576,4 +576,14 @@
|
||||
|
||||
.layui-table-cell-expand {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.layui-table-loading {
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.layui-table-loading .layui-icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
@ -49,6 +49,7 @@ export interface LayTableProps {
|
||||
spanMethod?: Function;
|
||||
defaultExpandAll?: boolean;
|
||||
expandKeys?: Recordable[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayTableProps>(), {
|
||||
@ -69,6 +70,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
|
||||
defaultExpandAll: false,
|
||||
spanMethod: () => {},
|
||||
expandKeys: () => [],
|
||||
loading: false
|
||||
});
|
||||
|
||||
const tableId = uuidv4();
|
||||
@ -708,8 +710,8 @@ const renderTotalRowCell = (column: any) => {
|
||||
ref="tableBody"
|
||||
>
|
||||
<table
|
||||
v-if="tableDataSource.length > 0"
|
||||
class="layui-table"
|
||||
v-if="tableDataSource.length > 0 && loading == false"
|
||||
:class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size"
|
||||
:lay-skin="skin"
|
||||
@ -775,7 +777,12 @@ const renderTotalRowCell = (column: any) => {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<lay-empty v-else></lay-empty>
|
||||
<lay-empty v-if="tableDataSource.length == 0 && loading == false"></lay-empty>
|
||||
<template v-if="loading == true">
|
||||
<div class="layui-table-loading">
|
||||
<i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="page" class="layui-table-page">
|
||||
|
||||
@ -1223,6 +1223,77 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 复杂表头
|
||||
:::
|
||||
|
||||
::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
|
||||
|
||||
<template>
|
||||
<lay-button @click="loadData">加载数据</lay-button>
|
||||
<lay-table :columns="columns30" :data-source="dataSource30" :loading="loading"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const columns30 = [
|
||||
{
|
||||
title:"名称",
|
||||
width:"200px",
|
||||
key:"username"
|
||||
},{
|
||||
title:"地址",
|
||||
children: [
|
||||
{ title: "省", key: "province", width: "300px" },
|
||||
{ title: "市", key: "city", width: "300px" },
|
||||
{ title: "区", key: "area", width: "300px" },
|
||||
]
|
||||
},{
|
||||
title:"性别",
|
||||
key:"sex"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "300px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource30 = ref([])
|
||||
|
||||
const loadData = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
dataSource30.value = [
|
||||
{id:"1",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"2",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"3",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"4",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"5",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
|
||||
];
|
||||
loading.value = false;
|
||||
},50000000)
|
||||
}
|
||||
|
||||
return {
|
||||
columns30,
|
||||
dataSource30,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整表格
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user