✨(component): 新增 table 组件 skin 属性, 用于切换风格, 可选参数为 row line nob, 默认为空

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

@@ -34,6 +34,7 @@ export interface LayTableProps {
   cellClassName?: string | Function;
   rowStyle?: string | Function;
   cellStyle?: string | Function;
+  skin?: string;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -296,7 +297,7 @@ props.dataSource.map((value: any) => {
       <div class="layui-table-box">
         <!-- 表头 -->
         <div class="layui-table-header" ref="tableHeader">
-          <table class="layui-table" :lay-size="size">
+          <table class="layui-table" :lay-size="size" :lay-skin="skin">
             <colgroup>
               <col v-if="checkbox" class="layui-table-col-special" />
               <template v-for="column in columns" :key="column">
@@ -378,6 +379,7 @@ props.dataSource.map((value: any) => {
             class="layui-table"
             :class="{ 'layui-table-even': props.even }"
             :lay-size="size"
+            :lay-skin="skin"
           >
             <colgroup>
               <col v-if="checkbox" class="layui-table-col-special" />

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

@@ -598,6 +598,62 @@ export default {
 
 :::
 
+::: title 不同风格
+:::
+
+::: demo 通过 `skin` 属性, 切换 table 风格。
+
+<template>
+  <lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table>
+  <lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table>
+  <lay-table :columns="columns1" :dataSource="dataSource1" skin="nob" 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 属性
 :::
 
@@ -621,6 +677,7 @@ export default {
 | rowStyle             | 行样式 function(row, rowIndex)                  | `string` `function`  | --   | -- |
 | cellClassName        | 列类名称 function(row, column, rowIndex, columnIndex)               | `string` `function`   | --    | -- |
 | rowClassName         | 行类名称 function(row, rowIndex)                | `string` `function`  | --   | -- |
+| skin                 | 风格                | `string` | --   | `line` `row` `nob` |
 
 :::