格式化

This commit is contained in:
Theluyuan 2023-05-29 13:24:55 +08:00
parent a6d8dfea39
commit 296e60f6c4
5 changed files with 226 additions and 91 deletions

View File

@ -44,7 +44,7 @@ export interface SelectProps {
showSearch?: boolean; showSearch?: boolean;
contentClass?: string | Array<string | object> | object; contentClass?: string | Array<string | object> | object;
contentStyle?: StyleValue; contentStyle?: StyleValue;
position?:string; position?: string;
} }
export interface SelectEmits { export interface SelectEmits {
@ -62,7 +62,7 @@ const props = withDefaults(defineProps<SelectProps>(), {
disabled: false, disabled: false,
multiple: false, multiple: false,
size: "md", size: "md",
position:"top" position: "top",
}); });
const slots = useSlots(); const slots = useSlots();

View File

@ -17,7 +17,7 @@ export interface StandardProps {
min?: number; min?: number;
max?: number; max?: number;
showDots?: boolean; showDots?: boolean;
backgroundColor:string; backgroundColor: string;
} }
const props = withDefaults(defineProps<StandardProps>(), { const props = withDefaults(defineProps<StandardProps>(), {
@ -27,7 +27,7 @@ const props = withDefaults(defineProps<StandardProps>(), {
min: 0, min: 0,
max: 100, max: 100,
showDots: false, showDots: false,
backgroundColor:"#ccc" backgroundColor: "#ccc",
}); });
const moveAction = throttle(standardMove); const moveAction = throttle(standardMove);
@ -119,9 +119,12 @@ const focusDot = (val: number) => {
class="layui-slider-rate-v" class="layui-slider-rate-v"
:class="[disabled ? 'layui-slider-disabled disable-line' : '']" :class="[disabled ? 'layui-slider-disabled disable-line' : '']"
></div> ></div>
<div class="layui-slider-line-v" :style="{ <div
backgroundColor:props.backgroundColor class="layui-slider-line-v"
}"></div> :style="{
backgroundColor: props.backgroundColor,
}"
></div>
<div <div
v-show="showDots" v-show="showDots"
@click="focusDot(item)" @click="focusDot(item)"

View File

@ -22,7 +22,7 @@ export interface SliderProps {
range?: boolean; range?: boolean;
rangeValue?: number[]; rangeValue?: number[];
showDots?: boolean; showDots?: boolean;
backgroundColor:string; backgroundColor: string;
} }
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
@ -35,7 +35,7 @@ const props = withDefaults(defineProps<SliderProps>(), {
min: 0, min: 0,
max: 100, max: 100,
showDots: false, showDots: false,
backgroundColor:"#ccc" backgroundColor: "#ccc",
}); });
let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue"); let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");

View File

@ -73,13 +73,13 @@ const props = withDefaults(defineProps<TableProps>(), {
rowStyle: "", rowStyle: "",
cellStyle: "", cellStyle: "",
defaultExpandAll: false, defaultExpandAll: false,
spanMethod: () => { }, spanMethod: () => {},
expandKeys: () => [], expandKeys: () => [],
loading: false, loading: false,
getCheckboxProps: () => { }, getCheckboxProps: () => {},
getRadioProps: () => { }, getRadioProps: () => {},
download: "", download: "",
serverpage: false serverpage: false,
}); });
const emit = defineEmits([ const emit = defineEmits([
@ -367,7 +367,6 @@ const change = function (page: any) {
page.limit * page.current page.limit * page.current
); );
} }
}; };
const rowClick = function (data: any, evt: MouseEvent) { const rowClick = function (data: any, evt: MouseEvent) {
@ -836,27 +835,50 @@ window.addEventListener("click", heddin);
</div> </div>
<div v-if="defaultToolbar" class="layui-table-tool-self"> <div v-if="defaultToolbar" class="layui-table-tool-self">
<!-- 筛选 --> <!-- 筛选 -->
<lay-dropdown v-if="showToolbar('filter')" updateAtScroll :style="toolbarStyle('filter')"> <lay-dropdown
v-if="showToolbar('filter')"
updateAtScroll
:style="toolbarStyle('filter')"
>
<div class="layui-inline" title="筛选" lay-event> <div class="layui-inline" title="筛选" lay-event>
<i class="layui-icon layui-icon-slider"></i> <i class="layui-icon layui-icon-slider"></i>
</div> </div>
<template #content> <template #content>
<div class="layui-table-tool-checkbox"> <div class="layui-table-tool-checkbox">
<lay-checkbox v-for="column in tableHeadColumns[0]" v-model="tableColumnKeys" skin="primary" <lay-checkbox
:disabled="column.children" :key="column.key" :value="column.key">{{ column.title }}</lay-checkbox> v-for="column in tableHeadColumns[0]"
v-model="tableColumnKeys"
skin="primary"
:disabled="column.children"
:key="column.key"
:value="column.key"
>{{ column.title }}</lay-checkbox
>
</div> </div>
</template> </template>
</lay-dropdown> </lay-dropdown>
<!-- 导出 --> <!-- 导出 -->
<div v-if="showToolbar('export')" class="layui-inline" title="导出" lay-event :style="toolbarStyle('export')" <div
@click="exportData()"> v-if="showToolbar('export')"
class="layui-inline"
title="导出"
lay-event
:style="toolbarStyle('export')"
@click="exportData()"
>
<i class="layui-icon layui-icon-export"></i> <i class="layui-icon layui-icon-export"></i>
</div> </div>
<!-- 打印 --> <!-- 打印 -->
<div v-if="showToolbar('print')" :style="toolbarStyle('print')" class="layui-inline" title="打印" lay-event <div
@click="print()"> v-if="showToolbar('print')"
:style="toolbarStyle('print')"
class="layui-inline"
title="打印"
lay-event
@click="print()"
>
<i class="layui-icon layui-icon-print"></i> <i class="layui-icon layui-icon-print"></i>
</div> </div>
</div> </div>
@ -868,26 +890,47 @@ window.addEventListener("click", heddin);
<div class="layui-table-box"> <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"> <div class="layui-table-header-wrapper" ref="tableHeader">
<table class="layui-table" :lay-size="size" :lay-skin="skin" ref="tableHeaderTable"> <table
class="layui-table"
:lay-size="size"
:lay-skin="skin"
ref="tableHeaderTable"
>
<colgroup> <colgroup>
<template v-for="column in tableBodyColumns" :key="column"> <template v-for="column in tableBodyColumns" :key="column">
<template v-if="tableColumnKeys.includes(column.key)"> <template v-if="tableColumnKeys.includes(column.key)">
<col :width="column.width" :style="{ <col
minWidth: column.minWidth ? column.minWidth : '50px', :width="column.width"
}" /> :style="{
minWidth: column.minWidth ? column.minWidth : '50px',
}"
/>
</template> </template>
</template> </template>
</colgroup> </colgroup>
<thead> <thead>
<template v-for="( <template
v-for="(
tableHeadColumn, tableHeadColumnIndex tableHeadColumn, tableHeadColumnIndex
) in tableHeadColumns" :key="tableHeadColumnIndex"> ) in tableHeadColumns"
:key="tableHeadColumnIndex"
>
<tr> <tr>
<template v-for="(column, columnIndex) in tableHeadColumn" :key="column"> <template
<th v-if="tableColumnKeys.includes(column.key)" :colspan="column.colspan" :rowspan="column.rowspan" v-for="(column, columnIndex) in tableHeadColumn"
class="layui-table-cell" :class="[ :key="column"
>
<th
v-if="tableColumnKeys.includes(column.key)"
:colspan="column.colspan"
:rowspan="column.rowspan"
class="layui-table-cell"
:class="[
renderFixedClassName(column, columnIndex), renderFixedClassName(column, columnIndex),
column.fixed column.fixed
? `layui-table-fixed-${column.fixed}` ? `layui-table-fixed-${column.fixed}`
@ -901,19 +944,26 @@ window.addEventListener("click", heddin);
column.type == 'number' column.type == 'number'
? 'layui-table-cell-number' ? 'layui-table-cell-number'
: '', : '',
]" :style="[ ]"
{ :style="[
textAlign: column.align, {
}, textAlign: column.align,
renderHeadFixedStyle( },
column, renderHeadFixedStyle(
columnIndex, column,
tableHeadColumn columnIndex,
), tableHeadColumn
]"> ),
]"
>
<template v-if="column.type == 'checkbox'"> <template v-if="column.type == 'checkbox'">
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all" <lay-checkbox
@change="changeAll" /> v-model="hasChecked"
:is-indeterminate="!allChecked"
skin="primary"
value="all"
@change="changeAll"
/>
</template> </template>
<template v-else> <template v-else>
<span> <span>
@ -925,16 +975,33 @@ window.addEventListener("click", heddin);
</template> </template>
</span> </span>
<!-- 插槽 --> <!-- 插槽 -->
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort> <span
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc" v-if="column.sort"
title="升序"></i> class="layui-table-sort layui-inline"
<i @click.stop=" lay-sort
sortTable($event, column.key, 'desc') >
" class="layui-edge layui-table-sort-desc" title="降序"></i> <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> </span>
<span v-if="column.soul" class="layui-table-sort layui-inline soul-icon"> <span
<i class="soul-icon soul-box" :class="column.soulclass || 'soul-icon-filter'" v-if="column.soul"
@click.stop="showsoul($event, column, column.key)"> class="layui-table-sort layui-inline soul-icon"
>
<i
class="soul-icon soul-box"
:class="column.soulclass || 'soul-icon-filter'"
@click.stop="showsoul($event, column, column.key)"
>
<!-- <div v-show="column.soulshow" @click.stop="" class="soulbox"> <!-- <div v-show="column.soulshow" @click.stop="" class="soulbox">
11111 11111
</div> --> </div> -->
@ -950,29 +1017,61 @@ window.addEventListener("click", heddin);
</div> </div>
</div> </div>
<!-- 表身 --> <!-- 表身 -->
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }" ref="tableBody"> <div
<table class="layui-table" v-if="datalist.length > 0 && loading == false" class="layui-table-body layui-table-main"
:class="{ 'layui-table-even': props.even }" :lay-size="size" :lay-skin="skin"> :style="{ height: height, maxHeight: maxHeight }"
ref="tableBody"
>
<table
class="layui-table"
v-if="datalist.length > 0 && loading == false"
:class="{ 'layui-table-even': props.even }"
:lay-size="size"
:lay-skin="skin"
>
<colgroup> <colgroup>
<template v-for="(column, columnIndex) in tableBodyColumns" :key="columnIndex"> <template
v-for="(column, columnIndex) in tableBodyColumns"
:key="columnIndex"
>
<template v-if="tableColumnKeys.includes(column.key)"> <template v-if="tableColumnKeys.includes(column.key)">
<col :width="column.width" :style="{ <col
minWidth: column.minWidth ? column.minWidth : '50px', :width="column.width"
}" /> :style="{
minWidth: column.minWidth ? column.minWidth : '50px',
}"
/>
</template> </template>
</template> </template>
</colgroup> </colgroup>
<tbody> <tbody>
<!-- 渲染 --> <!-- 渲染 -->
<template v-for="(children, index) in datalist" :key="index"> <template v-for="(children, index) in datalist" :key="index">
<table-row :id="id" :index="index" :data="children" :columns="tableBodyColumns" :indent-size="indentSize" <table-row
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys" :id="id"
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle" :index="index"
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName" :data="children"
:spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" :getCheckboxProps="getCheckboxProps" :columns="tableBodyColumns"
:getRadioProps="getRadioProps" v-model:expandKeys="tableExpandKeys" :indent-size="indentSize"
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey" @row="rowClick" :currentIndentSize="currentIndentSize"
@row-double="rowDoubleClick" @row-contextmenu="rowContextmenu"> :tableColumnKeys="tableColumnKeys"
:expandSpace="childrenExpandSpace"
:expandIndex="expandIndex"
:cellStyle="cellStyle"
:cellClassName="cellClassName"
:rowStyle="rowStyle"
:rowClassName="rowClassName"
:spanMethod="spanMethod"
:defaultExpandAll="defaultExpandAll"
:getCheckboxProps="getCheckboxProps"
:getRadioProps="getRadioProps"
v-model:expandKeys="tableExpandKeys"
v-model:selectedKeys="tableSelectedKeys"
v-model:selectedKey="tableSelectedKey"
@row="rowClick"
@row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu"
>
<template v-for="name in slotsData" #[name]="{ data }"> <template v-for="name in slotsData" #[name]="{ data }">
<slot :name="name" :data="data"></slot> <slot :name="name" :data="data"></slot>
</template> </template>
@ -982,21 +1081,28 @@ window.addEventListener("click", heddin);
</table-row> </table-row>
</template> </template>
<tr v-if="hasTotalRow" class="layui-table-total"> <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)"> <template v-if="tableColumnKeys.includes(column.key)">
<td :style="[ <td
{ :style="[
textAlign: column.align, {
whiteSpace: column.ellipsisTooltip textAlign: column.align,
? 'nowrap' whiteSpace: column.ellipsisTooltip
: 'normal', ? 'nowrap'
}, : 'normal',
renderFixedStyle(column, columnIndex), },
]" :class="[ renderFixedStyle(column, columnIndex),
'layui-table-cell', ]"
renderFixedClassName(column, columnIndex), :class="[
column.fixed ? `layui-table-fixed-${column.fixed}` : '', 'layui-table-cell',
]" v-html="renderTotalRowCell(column)"></td> renderFixedClassName(column, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
v-html="renderTotalRowCell(column)"
></td>
</template> </template>
</template> </template>
</tr> </tr>
@ -1008,7 +1114,9 @@ window.addEventListener("click", heddin);
</template> </template>
<template v-if="loading == true"> <template v-if="loading == true">
<div class="layui-table-loading"> <div class="layui-table-loading">
<i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i> <i
class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
></i>
</div> </div>
</template> </template>
</div> </div>
@ -1017,17 +1125,41 @@ window.addEventListener("click", heddin);
</div> </div>
</div> </div>
<div v-if="page && page.total > 0" class="layui-table-page"> <div v-if="page && page.total > 0" class="layui-table-page">
<table-page :total="page.total" :pages="page.pages" :theme="page.theme" :limits="page.limits" <table-page
:showSkip="page.showSkip" :show-page="page.showPage" :showRefresh="page.showRefresh" :showLimit="page.showLimit" :total="page.total"
:showCount="page.showCount" :count="page.count" v-model:current="page.current" v-model:limit="page.limit" :pages="page.pages"
@change="change"> :theme="page.theme"
:limits="page.limits"
:showSkip="page.showSkip"
:show-page="page.showPage"
:showRefresh="page.showRefresh"
:showLimit="page.showLimit"
:showCount="page.showCount"
:count="page.count"
v-model:current="page.current"
v-model:limit="page.limit"
@change="change"
>
</table-page> </table-page>
</div> </div>
</div> </div>
<div v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns" :key="tableHeadColumnIndex"> <div
v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns"
:key="tableHeadColumnIndex"
>
<div v-for="(column, columnIndex) in tableHeadColumn" :key="column"> <div v-for="(column, columnIndex) in tableHeadColumn" :key="column">
<soultable :top="soultop" :left="soulleft" v-show="soulkey == column.key" :show="soulkey == column.key" @asc="asc" <soultable
@desc="desc" @daochu="exportData" :list="datalist" :soulkey="column.key" @sx="sx"></soultable> :top="soultop"
:left="soulleft"
v-show="soulkey == column.key"
:show="soulkey == column.key"
@asc="asc"
@desc="desc"
@daochu="exportData"
:list="datalist"
:soulkey="column.key"
@sx="sx"
></soultable>
</div> </div>
</div> </div>
</div> </div>

View File

@ -40,14 +40,14 @@ export interface TagInputProps {
size?: TagInputSize; size?: TagInputSize;
tagProps?: TagProps; tagProps?: TagProps;
disabledInput?: boolean; disabledInput?: boolean;
position?:string; position?: string;
} }
const props = withDefaults(defineProps<TagInputProps>(), { const props = withDefaults(defineProps<TagInputProps>(), {
placeholder: undefined, placeholder: undefined,
minCollapsedNum: 0, minCollapsedNum: 0,
size: "md", size: "md",
position:"top" position: "top",
}); });
const emit = defineEmits([ const emit = defineEmits([