theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 新增 table 组件 columns 配置 hide 属性, 默认隐藏列

Browse Source
This commit is contained in:
就眠儀式
2022-07-18 13:09:55 +08:00
parent f82e57c06c
commit 95fb6014fa
6 changed files with 210 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package/component/src/component/datePicker/components/MonthPanel.vue
View File

@@ -102,9 +102,9 @@ const footOnOk = () => {
emits("ok");
return;
} else {
if(datePicker.type==='datetime'||datePicker.type==='date'){
if (datePicker.type === "datetime" || datePicker.type === "date") {
datePicker.showPanel.value = datePicker.type;
}else{
} else {
datePicker.ok();
}
}

10
package/component/src/component/datePicker/components/TimePanel.vue
View File

@@ -42,8 +42,10 @@
class="laydate-btns-time"
>选择日期</span
>
<template v-else-if="!isNaN(hms.hh)&&!isNaN(hms.mm)&&!isNaN(hms.ss)">
{{dayjs().hour(hms.hh).minute(hms.mm).second(hms.ss).format('HH:mm:ss')}}
<template v-else-if="!isNaN(hms.hh) && !isNaN(hms.mm) && !isNaN(hms.ss)">
{{
dayjs().hour(hms.hh).minute(hms.mm).second(hms.ss).format("HH:mm:ss")
}}
</template>
</PanelFoot>
</div>
@@ -130,8 +132,8 @@ const footOnOk = () => {
return;
} else {
datePicker.ok();
if(datePicker.type==='datetime'){
datePicker.showPanel.value='date';
if (datePicker.type === "datetime") {
datePicker.showPanel.value = "date";
}
}
};

6
package/component/src/component/datePicker/components/YearPanel.vue
View File

@@ -30,7 +30,7 @@
class="laydate-btns-time"
>选择月份</span
>
<template v-else-if="Year>0">{{ Year }}</template>
<template v-else-if="Year > 0">{{ Year }}</template>
</PanelFoot>
</div>
</template>
@@ -118,9 +118,9 @@ const footOnOk = () => {
emits("ok");
return;
} else {
if(datePicker.type==='datetime'||datePicker.type==='date'){
if (datePicker.type === "datetime" || datePicker.type === "date") {
datePicker.showPanel.value = datePicker.type;
}else{
} else {
datePicker.ok();
}
}

92
package/component/src/component/datePicker/index.vue
View File

@@ -1,14 +1,50 @@
<template>
<div>
<lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
<lay-input :name="name" :readonly="readonly" v-model="(dateValue as string)" :placeholder="placeholder"
prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range" @change="onChange" :allow-clear="!disabled&&allowClear" @clear="dateValue='';onChange()">
<lay-dropdown
ref="dropdownRef"
:disabled="disabled"
:autoFitMinWidth="false"
>
<lay-input
:name="name"
:readonly="readonly"
v-model="(dateValue as string)"
:placeholder="placeholder"
prefix-icon="layui-icon-date"
:disabled="disabled"
v-if="!range"
@change="onChange"
:allow-clear="!disabled && allowClear"
@clear="
dateValue = '';
onChange();
"
>
</lay-input>
<div class="laydate-range-inputs" v-else>
<lay-input :readonly="readonly" :name="name" v-model="dateValue[0]" :disabled="disabled" @change="onChange" class="start-input">
<lay-input
:readonly="readonly"
:name="name"
v-model="dateValue[0]"
:disabled="disabled"
@change="onChange"
class="start-input"
>
</lay-input>
<span class="range-separator">{{ rangeSeparator }}</span>
<lay-input :readonly="readonly" :name="name" :allow-clear="disabled&&allowClear" v-model="dateValue[1]" :disabled="disabled" @change="onChange" class="end-input" @clear="dateValue=[];onChange()">
<lay-input
:readonly="readonly"
:name="name"
:allow-clear="disabled && allowClear"
v-model="dateValue[1]"
:disabled="disabled"
@change="onChange"
class="end-input"
@clear="
dateValue = [];
onChange();
"
>
</lay-input>
</div>
@@ -92,8 +128,8 @@ export interface LayDatePickerProps {
min?: string;
range?: boolean;
rangeSeparator?: string;
readonly?:boolean;
allowClear?:boolean;
readonly?: boolean;
allowClear?: boolean;
}
const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -103,8 +139,8 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
simple: false,
range: false,
rangeSeparator: "至",
readonly:false,
allowClear:true,
readonly: false,
allowClear: true,
});
const dropdownRef = ref(null);
@@ -161,10 +197,13 @@ const getDateValue = () => {
.format("HH:mm:ss");
break;
case "yearmonth":
dayjsVal = currentYear.value !== -1&&currentMonth.value !== -1?dayjs()
.year(currentYear.value)
.month(currentMonth.value)
.format("YYYY-MM"):'';
dayjsVal =
currentYear.value !== -1 && currentMonth.value !== -1
? dayjs()
.year(currentYear.value)
.month(currentMonth.value)
.format("YYYY-MM")
: "";
break;
default:
dayjsVal =
@@ -177,10 +216,10 @@ const getDateValue = () => {
: "";
break;
}
dateValue.value = dayjsVal!=='Invalid Date'?dayjsVal:'';
if (dayjsVal === 'Invalid Date') {
dateValue.value = dayjsVal !== "Invalid Date" ? dayjsVal : "";
if (dayjsVal === "Invalid Date") {
unWatch = false;
$emits("update:modelValue", '');
$emits("update:modelValue", "");
return;
}
$emits("update:modelValue", dayjsVal);
@@ -268,14 +307,13 @@ watch(
hms.value.mm = dayjs(modelValue).minute();
hms.value.ss = dayjs(modelValue).second();
}
currentYear.value = initModelValue?getYear(initModelValue):-1;
currentMonth.value = initModelValue?getMonth(initModelValue):-1;
currentDay.value = initModelValue?getDay(initModelValue):-1;
if (props.type === 'date' || props.type === 'datetime') { // date与datetime容错
if (currentYear.value === -1)
currentYear.value = dayjs().year();
if (currentMonth.value === -1)
currentMonth.value = dayjs().month();
currentYear.value = initModelValue ? getYear(initModelValue) : -1;
currentMonth.value = initModelValue ? getMonth(initModelValue) : -1;
currentDay.value = initModelValue ? getDay(initModelValue) : -1;
if (props.type === "date" || props.type === "datetime") {
// date与datetime容错
if (currentYear.value === -1) currentYear.value = dayjs().year();
if (currentMonth.value === -1) currentMonth.value = dayjs().month();
}
rangeValue.first = initModelValue;
rangeValue.last =
@@ -291,12 +329,12 @@ watch(
{ immediate: true }
);
const onChange=()=>{
const onChange = () => {
if (dropdownRef.value)
// @ts-ignore
dropdownRef.value.hide();
$emits('update:modelValue',dateValue.value)
}
$emits("update:modelValue", dateValue.value);
};
provide("datePicker", {
currentYear: currentYear,

32
package/component/src/component/table/index.vue
View File

@@ -72,7 +72,9 @@ const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
const tableColumns = ref([...props.columns]);
const tableColumnKeys = ref(
props.columns.map((item: any) => {
return item.key;
if(item.hide != true) {
return item.key;
}
})
);
@@ -349,12 +351,14 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<colgroup>
<col v-if="checkbox" class="layui-table-col-special" />
<template v-for="column in columns" :key="column">
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '100px',
}"
/>
<template v-if="tableColumnKeys.includes(column.key)">
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '100px',
}"
/>
</template>
</template>
<col v-if="scrollWidthCell > 0" :width="scrollWidthCell" />
</colgroup>
@@ -442,12 +446,14 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<colgroup>
<col v-if="checkbox" class="layui-table-col-special" />
<template v-for="column in columns" :key="column">
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '100px',
}"
/>
<template v-if="tableColumnKeys.includes(column.key)">
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '100px',
}"
/>
</template>
</template>
</colgroup>
<tbody>