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

package/component/src/component/datePicker/components/MonthPanel.vue

@@ -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();
     }
   }

package/component/src/component/datePicker/components/TimePanel.vue

@@ -42,8 +42,10 @@
         class="laydate-btns-time"
         >选择日期</span
       >
-      <template v-else-if="!isNaN(hms.hh)&&!isNaN(hms.mm)&&!isNaN(hms.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')}}
+        {{
+          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'){
+    if (datePicker.type === "datetime") {
-      datePicker.showPanel.value='date';
+      datePicker.showPanel.value = "date";
     }
   }
 };

package/component/src/component/datePicker/components/YearPanel.vue

@@ -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();
     }
   }

package/component/src/component/datePicker/index.vue

@@ -1,14 +1,50 @@
 <template>
   <div>
-    <lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
+    <lay-dropdown
-      <lay-input :name="name" :readonly="readonly" v-model="(dateValue as string)" :placeholder="placeholder"
+      ref="dropdownRef"
-        prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range" @change="onChange" :allow-clear="!disabled&&allowClear" @clear="dateValue='';onChange()">
+      :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;
+  readonly?: boolean;
-  allowClear?:boolean;
+  allowClear?: boolean;
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -103,8 +139,8 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   simple: false,
   range: false,
   rangeSeparator: "至",
-  readonly:false,
+  readonly: false,
-  allowClear:true,
+  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()
+      dayjsVal =
-        .year(currentYear.value)
+        currentYear.value !== -1 && currentMonth.value !== -1
-        .month(currentMonth.value)
+          ? dayjs()
-        .format("YYYY-MM"):'';
+              .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:'';
+  dateValue.value = dayjsVal !== "Invalid Date" ? dayjsVal : "";
-  if (dayjsVal === 'Invalid Date') {
+  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;
+    currentYear.value = initModelValue ? getYear(initModelValue) : -1;
-    currentMonth.value = initModelValue?getMonth(initModelValue):-1;
+    currentMonth.value = initModelValue ? getMonth(initModelValue) : -1;
-    currentDay.value = initModelValue?getDay(initModelValue):-1;
+    currentDay.value = initModelValue ? getDay(initModelValue) : -1;
-    if (props.type === 'date' || props.type === 'datetime') { // date与datetime容错
+    if (props.type === "date" || props.type === "datetime") {
-      if (currentYear.value === -1)
+      // date与datetime容错
-        currentYear.value = dayjs().year();
+      if (currentYear.value === -1) currentYear.value = dayjs().year();
-      if (currentMonth.value === -1)
+      if (currentMonth.value === -1) currentMonth.value = dayjs().month();
-        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,

package/component/src/component/table/index.vue

@@ -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
+                <template v-if="tableColumnKeys.includes(column.key)">
-                  :width="column.width"
+                  <col
-                  :style="{
+                    :width="column.width"
-                    minWidth: column.minWidth ? column.minWidth : '100px',
+                    :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
+                <template v-if="tableColumnKeys.includes(column.key)">
-                  :width="column.width"
+                  <col
-                  :style="{
+                    :width="column.width"
-                    minWidth: column.minWidth ? column.minWidth : '100px',
+                    :style="{
-                  }"
+                      minWidth: column.minWidth ? column.minWidth : '100px',
-                />
+                    }"
+                  />
+                </template>
               </template>
             </colgroup>
             <tbody>

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

@@ -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 属性
 :::