✨(button): 优化 index.less
This commit is contained in:
就眠儀式
parent
e93c1b5e2a
commit
48cacb8d91
@ -33,13 +33,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-btn:not(.layui-btn-disabled){
|
||||
:hover,
|
||||
:active {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-btn-primary {
|
||||
color: var(--button-primary-text-color);
|
||||
background-color: var(--button-primary-background-color);
|
||||
@ -64,12 +57,17 @@
|
||||
border-color: var(--button-danger-border-color);
|
||||
}
|
||||
|
||||
.layui-btn-primary:hover,
|
||||
.layui-btn-normal:hover,
|
||||
.layui-btn:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.layui-btn-warm:hover,
|
||||
.layui-btn-normal:hover,
|
||||
.layui-btn-primary:hover,
|
||||
.layui-btn-danger:hover {
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity=80);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layui-btn-lg {
|
||||
|
||||
@ -84,7 +84,9 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
|
||||
|
||||
const isExpand: WritableComputedRef<any> = computed({
|
||||
get() {
|
||||
return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
|
||||
return tableExpandAll.value
|
||||
? true
|
||||
: tableExpandKeys.value.includes(props.data[props.id]);
|
||||
},
|
||||
set(val) {
|
||||
let newTableExpandKeys = [...tableExpandKeys.value];
|
||||
|
||||
@ -65,7 +65,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
|
||||
rowStyle: "",
|
||||
cellStyle: "",
|
||||
defaultExpandAll: false,
|
||||
spanMethod: () => { },
|
||||
spanMethod: () => {},
|
||||
expandKeys: () => [],
|
||||
});
|
||||
|
||||
@ -164,11 +164,13 @@ watch(
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
watch(tableExpandKeys, () => {
|
||||
emit("update:expandKeys", tableExpandKeys.value);
|
||||
},
|
||||
watch(
|
||||
tableExpandKeys,
|
||||
() => {
|
||||
emit("update:expandKeys", tableExpandKeys.value);
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
);
|
||||
|
||||
const change = function (page: any) {
|
||||
emit("change", page);
|
||||
@ -207,7 +209,7 @@ const exportData = () => {
|
||||
throw new Error("exception");
|
||||
}
|
||||
});
|
||||
} catch (e) { }
|
||||
} catch (e) {}
|
||||
});
|
||||
tableDataSource.value.forEach((item) => {
|
||||
let obj: any = [];
|
||||
@ -439,15 +441,31 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="layui-table-tool-checkbox">
|
||||
<lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
|
||||
:value="column.key">{{ column.title }}</lay-checkbox>
|
||||
<lay-checkbox
|
||||
v-for="column in columns"
|
||||
v-model="tableColumnKeys"
|
||||
skin="primary"
|
||||
:key="column.key"
|
||||
:value="column.key"
|
||||
>{{ column.title }}</lay-checkbox
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
|
||||
<div
|
||||
class="layui-inline"
|
||||
title="导出"
|
||||
lay-event="LAYTABLE_PRINT"
|
||||
@click="exportData()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
</div>
|
||||
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
|
||||
<div
|
||||
class="layui-inline"
|
||||
title="打印"
|
||||
lay-event="LAYTABLE_PRINT"
|
||||
@click="print()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -455,40 +473,59 @@ const renderTotalRowCell = (column: any) => {
|
||||
|
||||
<div class="layui-table-box">
|
||||
<!-- 表头 -->
|
||||
<div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
|
||||
<div
|
||||
class="layui-table-header"
|
||||
:style="[{ 'padding-right': `${scrollWidthCell}px` }]"
|
||||
>
|
||||
<div class="layui-table-header-wrapper" ref="tableHeader">
|
||||
<table class="layui-table" :lay-size="size" :lay-skin="skin">
|
||||
<colgroup>
|
||||
<template v-for="column in columns" :key="column">
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<col :width="column.width" :style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}" />
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<template v-for="(column, columnIndex) in columns" :key="column">
|
||||
<th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
column.type == 'checkbox'
|
||||
? 'layui-table-cell-checkbox'
|
||||
: '',
|
||||
column.type == 'radio' ? 'layui-table-cell-radio' : '',
|
||||
column.type == 'number'
|
||||
? 'layui-table-cell-number'
|
||||
: '',
|
||||
]" :style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
]">
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="column"
|
||||
>
|
||||
<th
|
||||
v-if="tableColumnKeys.includes(column.key)"
|
||||
class="layui-table-cell"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
column.type == 'checkbox'
|
||||
? 'layui-table-cell-checkbox'
|
||||
: '',
|
||||
column.type == 'radio' ? 'layui-table-cell-radio' : '',
|
||||
column.type == 'number'
|
||||
? 'layui-table-cell-number'
|
||||
: '',
|
||||
]"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
]"
|
||||
>
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
|
||||
@change="changeAll" />
|
||||
<lay-checkbox
|
||||
v-model="hasChecked"
|
||||
:is-indeterminate="!allChecked"
|
||||
skin="primary"
|
||||
value="all"
|
||||
@change="changeAll"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>
|
||||
@ -500,11 +537,21 @@ const renderTotalRowCell = (column: any) => {
|
||||
</template>
|
||||
</span>
|
||||
<!-- 插槽 -->
|
||||
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
|
||||
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
|
||||
title="升序"></i>
|
||||
<i @click.stop="sortTable($event, column.key, 'desc')"
|
||||
class="layui-edge layui-table-sort-desc" title="降序"></i>
|
||||
<span
|
||||
v-if="column.sort"
|
||||
class="layui-table-sort layui-inline"
|
||||
lay-sort
|
||||
>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'asc')"
|
||||
class="layui-edge layui-table-sort-asc"
|
||||
title="升序"
|
||||
></i>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'desc')"
|
||||
class="layui-edge layui-table-sort-desc"
|
||||
title="降序"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
</th>
|
||||
@ -515,29 +562,59 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表身 -->
|
||||
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
|
||||
ref="tableBody">
|
||||
<table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size" :lay-skin="skin">
|
||||
<div
|
||||
class="layui-table-body layui-table-main"
|
||||
:style="{ height: height, maxHeight: maxHeight }"
|
||||
ref="tableBody"
|
||||
>
|
||||
<table
|
||||
v-if="tableDataSource.length > 0"
|
||||
class="layui-table"
|
||||
:class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<colgroup>
|
||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
>
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<col :width="column.width" :style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}" />
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<!-- 渲染 -->
|
||||
<template v-for="(data, index) in tableDataSource" :key="index">
|
||||
<table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
|
||||
:spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" @row="rowClick"
|
||||
@row-double="rowDoubleClick" @row-contextmenu="rowContextmenu" v-model:expandKeys="tableExpandKeys"
|
||||
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey">
|
||||
<table-row
|
||||
:id="id"
|
||||
:index="index"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize"
|
||||
:tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace"
|
||||
:expandIndex="expandIndex"
|
||||
:cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName"
|
||||
:rowStyle="rowStyle"
|
||||
:rowClassName="rowClassName"
|
||||
:spanMethod="spanMethod"
|
||||
:defaultExpandAll="defaultExpandAll"
|
||||
@row="rowClick"
|
||||
@row-double="rowDoubleClick"
|
||||
@row-contextmenu="rowContextmenu"
|
||||
v-model:expandKeys="tableExpandKeys"
|
||||
v-model:selectedKeys="tableSelectedKeys"
|
||||
v-model:selectedKey="tableSelectedKey"
|
||||
>
|
||||
<template v-for="name in slotsData" #[name]="{ data }">
|
||||
<slot :name="name" :data="data"></slot>
|
||||
</template>
|
||||
@ -547,7 +624,10 @@ const renderTotalRowCell = (column: any) => {
|
||||
</table-row>
|
||||
</template>
|
||||
<tr v-if="hasTotalRow" class="layui-table-total">
|
||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
>
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<td>{{ renderTotalRowCell(column) }}</td>
|
||||
</template>
|
||||
@ -559,8 +639,15 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="page" class="layui-table-page">
|
||||
<lay-page show-page show-skip show-limit :total="page.total" :limit="page.limit" v-model="page.current"
|
||||
@jump="change">
|
||||
<lay-page
|
||||
show-page
|
||||
show-skip
|
||||
show-limit
|
||||
:total="page.total"
|
||||
:limit="page.limit"
|
||||
v-model="page.current"
|
||||
@jump="change"
|
||||
>
|
||||
<template #prev>
|
||||
<lay-icon type="layui-icon-left" />
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user