(table): 优化 default-toolbar 属性支持 array 配置指定操作

This commit is contained in:
就眠儀式 2022-11-16 00:35:24 +08:00
parent c1325055fb
commit 48626d7a37
5 changed files with 32 additions and 10 deletions

View File

@ -32,7 +32,7 @@ export interface TableProps {
page?: Recordable; page?: Recordable;
columns: Recordable[]; columns: Recordable[];
dataSource: Recordable[]; dataSource: Recordable[];
defaultToolbar?: boolean | Recordable[]; defaultToolbar?: boolean | any[];
selectedKey?: string; selectedKey?: string;
selectedKeys?: Recordable[]; selectedKeys?: Recordable[];
indentSize?: number; indentSize?: number;
@ -60,6 +60,7 @@ const props = withDefaults(defineProps<TableProps>(), {
childrenColumnName: "children", childrenColumnName: "children",
dataSource: () => [], dataSource: () => [],
selectedKeys: () => [], selectedKeys: () => [],
defaultToolbar: false,
selectedKey: "", selectedKey: "",
maxHeight: "auto", maxHeight: "auto",
even: false, even: false,
@ -518,7 +519,6 @@ const childrenExpandSpace = computed(() => {
); );
}); });
const renderFixedStyle = (column: any, columnIndex: number) => { const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed) { if (column.fixed) {
if (column.fixed == "left") { if (column.fixed == "left") {
@ -564,7 +564,11 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
/** /**
* @remark 排除 hide * @remark 排除 hide
*/ */
const renderHeadFixedStyle = (column: any, columnIndex: number, tableHeadColumn: any[]) => { const renderHeadFixedStyle = (
column: any,
columnIndex: number,
tableHeadColumn: any[]
) => {
if (column.fixed) { if (column.fixed) {
if (column.fixed == "left") { if (column.fixed == "left") {
var left = 0; var left = 0;
@ -671,6 +675,13 @@ const totalRowMethod = (column: any, dataSource: any[]) => {
return total; return total;
}; };
const showToolbar = (toolbarName: string) => {
if(props.defaultToolbar instanceof Array) {
return props.defaultToolbar.includes(toolbarName)
}
return props.defaultToolbar;
}
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.onresize = null; window.onresize = null;
}); });
@ -685,7 +696,8 @@ onBeforeUnmount(() => {
<slot name="toolbar"></slot> <slot name="toolbar"></slot>
</div> </div>
<div v-if="defaultToolbar" class="layui-table-tool-self"> <div v-if="defaultToolbar" class="layui-table-tool-self">
<lay-dropdown updateAtScroll>
<lay-dropdown updateAtScroll v-if="showToolbar('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>
@ -703,7 +715,9 @@ onBeforeUnmount(() => {
</div> </div>
</template> </template>
</lay-dropdown> </lay-dropdown>
<div <div
v-if="showToolbar('export')"
class="layui-inline" class="layui-inline"
title="导出" title="导出"
lay-event lay-event
@ -711,7 +725,8 @@ onBeforeUnmount(() => {
> >
<i class="layui-icon layui-icon-export"></i> <i class="layui-icon layui-icon-export"></i>
</div> </div>
<div class="layui-inline" title="打印" lay-event @click="print()">
<div class="layui-inline" v-if="showToolbar('print')" 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>
@ -782,7 +797,11 @@ onBeforeUnmount(() => {
{ {
textAlign: column.align, textAlign: column.align,
}, },
renderHeadFixedStyle(column, columnIndex, tableHeadColumn), renderHeadFixedStyle(
column,
columnIndex,
tableHeadColumn
),
]" ]"
> >
<template v-if="column.type == 'checkbox'"> <template v-if="column.type == 'checkbox'">

View File

@ -105,7 +105,9 @@ function useTagCustomStyle(props: TagProps) {
<span v-if="$slots.icon" class="layui-tag-icon"> <span v-if="$slots.icon" class="layui-tag-icon">
<slot name="icon" /> <slot name="icon" />
</span> </span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;"> <span
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
>
<span v-if="maxWidth" :style="styleTag" class="layui-tag-text"> <span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
<slot /> <slot />
</span> </span>

View File

@ -1430,7 +1430,7 @@ export default {
const selectedKeys5 = ref(['1']) const selectedKeys5 = ref(['1'])
const checkbox5 = ref(true) const checkbox5 = ref(true)
const defaultToolbar5 = ref(true) const defaultToolbar5 = ref(['print'])
const maxHeight5 = ref('600px'); const maxHeight5 = ref('600px');
const page5 = { const page5 = {

View File

@ -16,10 +16,11 @@
<li> <li>
<h3>1.7.8 <span class="layui-badge-rim">2022-11-15</span></h3> <h3>1.7.8 <span class="layui-badge-rim">2022-11-15</span></h3>
<ul> <ul>
<li>[修复] backtop 组件部分浏览器版本无法正常返回顶部。</li> <li>[优化] backtop 组件部分浏览器版本无法正常返回顶部。</li>
<li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li> <li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li>
<li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li> <li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li>
<li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li> <li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li>
<li>[优化] table 组件 default-toolbar 属性支持 Array 类型, 举例:['print']。</li>
</ul> </ul>
</li> </li>
</ul> </ul>

View File

@ -32,7 +32,7 @@
> >
<span <span
>{{ t("home.download") }}<em class="site-showdowns" >{{ t("home.download") }}<em class="site-showdowns"
>35,223</em >39,044</em
></span ></span
> >
</div> </div>