📝(component): 更新日志

2022-06-29 10:09:21 +08:00 · 2022-06-29 10:09:21 +08:00 · 36323688bb
commit 36323688bb
parent fb16960f28
5 changed files with 121 additions and 33 deletions
--- a/package/component/src/component/table/TableRow.vue
+++ b/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) => {
-  if(typeof props.cellStyle === 'string') {
+const renderCellStyle = (
+  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) => {
-  if(typeof props.cellClassName === 'string') {
+const renderCellClassName = (
+  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="[{
-              textAlign: column.align,
-              whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-            }, renderCellStyle(data, column, index, columnIndex)]"
-            :class="[renderCellClassName(data, column, index, columnIndex)]" 
+            :style="[
+              {
+                textAlign: column.align,
+                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+              },
+              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="[{
-                textAlign: column.align,
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              }, renderCellStyle(data, column, index, columnIndex)]"
-              :class="[renderCellClassName(data, column, index, columnIndex)]" 
+              :style="[
+                {
+                  textAlign: column.align,
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                },
+                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"
--- a/package/component/src/component/table/index.vue
+++ b/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"
--- a/package/component/src/provider/index.vue
+++ b/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);
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/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 属性
 :::

--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/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>