✨(component): 新增 table 组件 even 属性, 用于开启斑马条纹

package/component/src/component/table/index.less

@@ -27,7 +27,7 @@
 .layui-table-tool,
 .layui-table-total,
 .layui-table-total tr,
-.layui-table[lay-even] tr:nth-child(even) {
+.layui-table.layui-table-even tr:nth-child(even) {
   background-color: var(--global-neutral-color-1);
 }
 

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

@@ -29,6 +29,7 @@ export interface LayTableProps {
   childrenColumnName?: string;
   height?: number;
   maxHeight?: string;
+  even?: boolean;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   dataSource: () => [],
   selectedKeys: () => [],
   maxHeight: "auto",
+  even: false,
 });
 
 const tableId = uuidv4();
@@ -364,7 +366,7 @@ props.dataSource.map((value: any) => {
           :style="{ height: height, maxHeight: maxHeight }"
           ref="tableBody"
         >
-          <table class="layui-table" :lay-size="size">
+          <table class="layui-table" :class="{'layui-table-even': props.even}" :lay-size="size">
             <colgroup>
               <col v-if="checkbox" class="layui-table-col-special" />
               <template v-for="column in columns" :key="column">

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

@@ -476,6 +476,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 属性
 :::