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
Show Stats 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>

219
package/document-component/src/document/zh-CN/components/table.md
View File

@ -220,110 +220,6 @@ export default {
:::
::: title 完整表格
:::
::: demo
<template>
<lay-table :columns="columns5" id="id" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
<template v-slot:toolbar>
<lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button>
</template>
<template v-slot:username="{ data }"> {{data.username}} </template>
<template v-slot:username-title>😊</template>
<template v-slot:password="{ data }"> {{data.password}} </template>
<template v-slot:operator="{ data }">
<lay-button size="xs">修改</lay-button>
<lay-button size="xs" type="primary">删除</lay-button>
</template>
<template v-slot:expand="{ data }">
<div style="height:100px;">
内容
</div>
</template>
</lay-table>
</template>
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const selectedKeys5 = ref(['1'])
const checkbox5 = ref(true)
const defaultToolbar5 = ref(true)
const columns5 = [
{
title:"账户",
width:"200px",
titleSlot: "username-title",
customSlot:"username",
key:"username",
align: "left"
},{
title:"密码",
customSlot:"password",
width:"200px",
key:"password",
align: "center"
},
{
title:"年龄",
width: "200px",
key:"age",
sort: true,
align: "right"
},
{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true,
}
,{
title:"操作",
width:"100px",
customSlot:"operator",
key:"operator"
}
]
const dataSource5 = [
{id:"1", username:"root",password: '**',age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"2", username:"woow",password: '**', age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
]
const rowClick5 = function(data) {
console.log(JSON.stringify(data))
}
const rowDoubleClick5 = function(data) {
console.log(JSON.stringify(data))
}
watch(selectedKeys5, () => {
console.log("复选框监听:" + selectedKeys5.value);
})
return {
columns5,
dataSource5,
selectedKeys5,
checkbox5,
defaultToolbar5,
rowClick5,
rowDoubleClick5
}
}
}
</script>
:::
::: title 开启子表
:::
@ -781,6 +677,121 @@ export default {
:::
::: title 完整表格
:::
::: demo
<template>
<lay-table :columns="columns5" id="id" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
<template v-slot:toolbar>
<lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button>
</template>
<template v-slot:name="{ data }"> {{data.name}} </template>
<template v-slot:name-title>😊</template>
<template v-slot:birthday="{ data }"> {{data.birthday}} </template>
<template v-slot:operator="{ data }">
<lay-button size="xs">修改</lay-button>
<lay-button size="xs" type="primary">删除</lay-button>
</template>
<template v-slot:expand="{ data }">
<div style="height:100px;">
内容
</div>
</template>
</lay-table>
</template>
<script>
import { ref, watch } from 'vue'
export default {
setup() {
const selectedKeys5 = ref(['1'])
const checkbox5 = ref(true)
const defaultToolbar5 = ref(true)
const columns5 = [
{
title:"姓名",
fixed:"left",
width:"200px",
titleSlot: "name-title",
customSlot:"name",
key:"name",
align: "left"
},{
title:"生日",
customSlot:"birthday",
width:"200px",
key:"birthday"
},
{
title:"年龄",
width: "200px",
key:"age",
sort: true,
},
{
title:"隐藏列",
width: "200px",
key:"hide",
sort: true,
hide: true,
},
{
title:"备注",
width: "300px",
key:"remark",
ellipsisTooltip: true,
}
,{
title:"操作",
width:"150px",
fixed:"right",
customSlot:"operator",
key:"operator"
}
]
const dataSource5 = [
{id:"1", name:"小明",birthday: '2022-02-09', hide: "你看不见我", age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"2", name:"小红",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"3", name:"小刚",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"4", name:"小李",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"5", name:"小柏",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"6", name:"小吉",birthday: '2022-02-09', hide: "你看不见我", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
]
const rowClick5 = function(data) {
console.log(JSON.stringify(data))
}
const rowDoubleClick5 = function(data) {
console.log(JSON.stringify(data))
}
watch(selectedKeys5, () => {
console.log("复选框监听:" + selectedKeys5.value);
})
return {
columns5,
dataSource5,
selectedKeys5,
checkbox5,
defaultToolbar5,
rowClick5,
rowDoubleClick5
}
}
}
</script>
:::
::: title Table 属性
:::