✨(table): 优化 default-toolbar 属性支持 array 配置指定操作
This commit is contained in:
parent
c1325055fb
commit
48626d7a37
@ -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'">
|
||||||
|
@ -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>
|
||||||
|
@ -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 = {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user