📝(component): 更新日志

package/component/src/component/table/TableRow.vue

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<LayTableRowProps>(), {
   checkbox: false,
   childrenColumnName: "children",
   cellStyle: "",
-  cellClassName: ""
+  cellClassName: "",
 });
 
 const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@@ -82,33 +82,43 @@ const handleExpand = () => {
   isExpand.value = !isExpand.value;
 };
 
-const renderCellStyle = (row: any, column: any, rowIndex: number, columnIndex: number) => {
+const renderCellStyle = (
-  if(typeof props.cellStyle === 'string') {
+  row: any,
+  column: any,
+  rowIndex: number,
+  columnIndex: number
+) => {
+  if (typeof props.cellStyle === "string") {
     return props.cellStyle;
-  } 
+  }
   return props.cellStyle(row, column, rowIndex, columnIndex);
-}
+};
 
-const renderCellClassName = (row: any, column: any, rowIndex: number, columnIndex: number) => {
+const renderCellClassName = (
-  if(typeof props.cellClassName === 'string') {
+  row: any,
+  column: any,
+  rowIndex: number,
+  columnIndex: number
+) => {
+  if (typeof props.cellClassName === "string") {
     return props.cellClassName;
-  } 
+  }
-  return props.cellClassName(row, column, rowIndex, columnIndex); 
+  return props.cellClassName(row, column, rowIndex, columnIndex);
-}
+};
 
 const renderRowStyle = (data: any, index: number) => {
-  if(typeof props.rowStyle === 'string') {
+  if (typeof props.rowStyle === "string") {
     return props.rowStyle;
-  } 
+  }
-  return props.rowStyle(data, index); 
+  return props.rowStyle(data, index);
-}
+};
 
 const renderRowClassName = (data: any, index: number) => {
-  if(typeof props.rowClassName === 'string') {
+  if (typeof props.rowClassName === "string") {
     return props.rowClassName;
-  } 
+  }
-  return props.rowClassName(data, index); 
+  return props.rowClassName(data, index);
-}
+};
 
 const childrenIndentSize = props.currentIndentSize + props.indentSize;
 </script>
@@ -140,11 +150,14 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
         <template v-if="column.customSlot">
           <td
             class="layui-table-cell"
-            :style="[{
+            :style="[
-              textAlign: column.align,
+              {
-              whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                textAlign: column.align,
-            }, renderCellStyle(data, column, index, columnIndex)]"
+                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-            :class="[renderCellClassName(data, column, index, columnIndex)]" 
+              },
+              renderCellStyle(data, column, index, columnIndex),
+            ]"
+            :class="[renderCellClassName(data, column, index, columnIndex)]"
           >
             <!-- 树表占位与缩进 -->
             <span
@@ -163,7 +176,9 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
             ></span>
 
             <lay-icon
-              v-if="(slot.expand || data[childrenColumnName]) && columnIndex === 0"
+              v-if="
+                (slot.expand || data[childrenColumnName]) && columnIndex === 0
+              "
               class="layui-table-cell-expand-icon"
               :type="expandIconType"
               @click="handleExpand"
@@ -185,11 +200,14 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
           <template v-if="column.key in data">
             <td
               class="layui-table-cell"
-              :style="[{
+              :style="[
-                textAlign: column.align,
+                {
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                  textAlign: column.align,
-              }, renderCellStyle(data, column, index, columnIndex)]"
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              :class="[renderCellClassName(data, column, index, columnIndex)]" 
+                },
+                renderCellStyle(data, column, index, columnIndex),
+              ]"
+              :class="[renderCellClassName(data, column, index, columnIndex)]"
             >
               <!-- 树表占位与缩进 -->
               <span
@@ -208,7 +226,9 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
               ></span>
 
               <lay-icon
-                v-if="(slot.expand || data[childrenColumnName]) && columnIndex === 0"
+                v-if="
+                  (slot.expand || data[childrenColumnName]) && columnIndex === 0
+                "
                 class="layui-table-cell-expand-icon"
                 :type="expandIconType"
                 @click="handleExpand"

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

@@ -395,7 +395,7 @@ props.dataSource.map((value: any) => {
               <template v-for="(data, index) in tableDataSource" :key="data">
                 <table-row
                   :id="id"
-                  :index="index" 
+                  :index="index"
                   :data="data"
                   :columns="columns"
                   :checkbox="checkbox"

package/component/src/provider/index.vue

@@ -13,7 +13,7 @@ import {
   enable as enableDarkMode,
   disable as disableDarkMode,
   auto as followSystemColorScheme,
-  setFetchMethod
+  setFetchMethod,
 } from "@umijs/ssr-darkreader";
 
 export interface LayConfigProviderProps {
@@ -72,7 +72,7 @@ const changeTheme = (theme: string) => {
   };
   Object.assign(defaultPartial, props.darkPartial);
   if (theme === "dark") {
-    if(window){
+    if (window) {
       setFetchMethod(window.fetch);
     }
     enableDarkMode(defaultPartial, defaultFixes);

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

@@ -598,6 +598,60 @@ export default {
 
 :::
 
+::: title 固定边列
+:::
+
+::: demo 通过 `even` 属性, 开启斑马条纹, 默认为 false。
+
+<template>
+  <lay-table :columns="columns1" :dataSource="dataSource1" even></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns1 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "180px",
+        key:"password"
+      },{
+        title:"年龄",
+        width: "180px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true,
+      }
+    ]
+
+    const dataSource1 = [
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    return {
+      columns1,
+      dataSource1
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Table 属性
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -11,6 +11,20 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.2.x">
+    <ul> 
+      <a name="1-2-5"></a> 
+      <li> 
+        <h3>1.2.5 <span class="layui-badge-rim">2022-06-28</span></h3> 
+        <ul>
+          <li>[新增] table 组件 rowStyle 属性, 自定义行样式, 值为 function(row, rowIndex) 函数或 string 类型。</li>
+          <li>[新增] table 组件 rowClassName 属性, 自定义行样式, 值为 function(row, rowIndex) 函数或 string 类型。</li>
+          <li>[新增] table 组件 cellStyle 属性, 自定义单元格样式, 值为 function(row, column, rowIndex, columnIndex) 函数或 string 类型。</li>
+          <li>[新增] table 组件 cellClassName 属性, 自定义单元格样式, 值为 function(row, column, rowIndex, columnIndex) 函数或 string 类型。</li>
+          <li>[修复] icon-picker 组件在颜色面板中拉动选取颜色，触碰颜色面板边角时，导致色相变为 0。 </li>
+          <li>[修复] provider 组件切换主题 Embedded Dark Reader cannot access a cross-origin resource。</li>
+        </ul>
+      </li>
+    </ul>
     <ul> 
       <a name="1-2-4"></a> 
       <li>