✨(table): 新增 cellStyle cellClassName rowStyle rowClassName 属性, 用于自定义单元格样式

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

@@ -12,6 +12,7 @@ import LayDropdown from "../dropdown/index.vue";
 import LayTooltip from "../tooltip/index.vue";
 
 export interface LayTableRowProps {
+  index: number;
   indentSize: number;
   currentIndentSize: number;
   expandSpace: boolean;
@@ -20,6 +21,10 @@ export interface LayTableRowProps {
   childrenColumnName?: string;
   columns: Recordable[];
   checkbox?: boolean;
+  cellClassName: string | Function;
+  cellStyle: string | Function;
+  rowClassName: string | Function;
+  rowStyle: string | Function;
   id: string;
   data: any;
 }
@@ -35,6 +40,8 @@ const emit = defineEmits([
 const props = withDefaults(defineProps<LayTableRowProps>(), {
   checkbox: false,
   childrenColumnName: "children",
+  cellStyle: "",
+  cellClassName: ""
 });
 
 const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@@ -75,11 +82,41 @@ const handleExpand = () => {
   isExpand.value = !isExpand.value;
 };
 
+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') {
+    return props.cellClassName;
+  } 
+  return props.cellClassName(row, column, rowIndex, columnIndex); 
+}
+
+const renderRowStyle = (data: any, index: number) => {
+  if(typeof props.rowStyle === 'string') {
+    return props.rowStyle;
+  } 
+  return props.rowStyle(data, index); 
+}
+
+const renderRowClassName = (data: any, index: number) => {
+  if(typeof props.rowClassName === 'string') {
+    return props.rowClassName;
+  } 
+  return props.rowClassName(data, index); 
+}
+
 const childrenIndentSize = props.currentIndentSize + props.indentSize;
 </script>
 
 <template>
   <tr
+    :style="[renderRowStyle(data, index)]"
+    :class="[renderRowClassName(data, index)]"
     @click.stop="rowClick(data, $event)"
     @dblclick.stop="rowDoubleClick(data, $event)"
     @contextmenu.stop="contextmenu(data, $event)"
@@ -96,21 +133,22 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
     </td>
 
     <!-- 数据列 -->
-    <template v-for="(column, index) in columns" :key="column">
+    <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
         <!-- 插槽列 -->
         <template v-if="column.customSlot">
           <td
             class="layui-table-cell"
-            :style="{
+            :style="[{
               textAlign: column.align,
               whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-            }"
+            }, renderCellStyle(data, column, index, columnIndex)]"
+            :class="[renderCellClassName(data, column, index, columnIndex)]" 
           >
             <!-- 树表占位与缩进 -->
             <span
-              v-if="expandSpace && index === 0"
+              v-if="expandSpace && columnIndex === 0"
               :style="{ 'margin-right': currentIndentSize + 'px' }"
             ></span>
 
@@ -119,13 +157,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                 expandSpace &&
                 !data[childrenColumnName] &&
                 !slot.expand &&
-                index === 0
+                columnIndex === 0
               "
               class="layui-table-cell-expand-icon-spaced"
             ></span>
 
             <lay-icon
-              v-if="(slot.expand || data[childrenColumnName]) && index === 0"
+              v-if="(slot.expand || data[childrenColumnName]) && columnIndex === 0"
               class="layui-table-cell-expand-icon"
               :type="expandIconType"
               @click="handleExpand"
@@ -147,14 +185,15 @@ 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',
-              }"
+              }, renderCellStyle(data, column, index, columnIndex)]"
+              :class="[renderCellClassName(data, column, index, columnIndex)]" 
             >
               <!-- 树表占位与缩进 -->
               <span
-                v-if="expandSpace && index === 0"
+                v-if="expandSpace && columnIndex === 0"
                 :style="{ 'margin-right': currentIndentSize + 'px' }"
               ></span>
 
@@ -163,13 +202,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                   expandSpace &&
                   !data[childrenColumnName] &&
                   !slot.expand &&
-                  index === 0
+                  columnIndex === 0
                 "
                 class="layui-table-cell-expand-icon-spaced"
               ></span>
 
               <lay-icon
-                v-if="(slot.expand || data[childrenColumnName]) && index === 0"
+                v-if="(slot.expand || data[childrenColumnName]) && columnIndex === 0"
                 class="layui-table-cell-expand-icon"
                 :type="expandIconType"
                 @click="handleExpand"
@@ -198,11 +237,12 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
   <!-- 树形结构 -->
   <template v-if="data[childrenColumnName] && isExpand">
     <template
-      v-for="(children, index) in data[childrenColumnName]"
+      v-for="(children, childrenIndex) in data[childrenColumnName]"
-      :key="index"
+      :key="childrenIndex"
     >
       <table-row
         :id="id"
+        :index="childrenIndex"
         :data="children"
         :columns="columns"
         :indent-size="indentSize"
@@ -210,6 +250,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
         :checkbox="checkbox"
         :tableColumnKeys="tableColumnKeys"
         :expandSpace="expandSpace"
+        :cellStyle="cellStyle"
+        :cellClassName="cellClassName"
+        :rowStyle="rowStyle"
+        :rowClassName="rowClassName"
         @row="rowClick"
         @row-double="rowDoubleClick"
         @contextmenu="contextmenu"

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

@@ -30,6 +30,10 @@ export interface LayTableProps {
   height?: number;
   maxHeight?: string;
   even?: boolean;
+  rowClassName?: string | Function;
+  cellClassName?: string | Function;
+  rowStyle?: string | Function;
+  cellStyle?: string | Function;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -41,6 +45,10 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   selectedKeys: () => [],
   maxHeight: "auto",
   even: false,
+  rowClassName: "",
+  cellClassName: "",
+  rowStyle: "",
+  cellStyle: "",
 });
 
 const tableId = uuidv4();
@@ -384,9 +392,10 @@ props.dataSource.map((value: any) => {
             </colgroup>
             <tbody>
               <!-- 渲染 -->
-              <template v-for="data in tableDataSource" :key="data">
+              <template v-for="(data, index) in tableDataSource" :key="data">
                 <table-row
                   :id="id"
+                  :index="index" 
                   :data="data"
                   :columns="columns"
                   :checkbox="checkbox"
@@ -394,6 +403,10 @@ props.dataSource.map((value: any) => {
                   :currentIndentSize="currentIndentSize"
                   :tableColumnKeys="tableColumnKeys"
                   :expandSpace="childrenExpandSpace"
+                  :cellStyle="cellStyle"
+                  :cellClassName="cellClassName"
+                  :rowStyle="rowStyle"
+                  :rowClassName="rowClassName"
                   @row="rowClick"
                   @row-double="rowDoubleClick"
                   @contextmenu="contextmenu"

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

@@ -530,6 +530,74 @@ export default {
 
 :::
 
+::: title 定义样式
+:::
+
+::: demo 通过 `cellStyle` `rowStyle` `cellClassName` `rowClassName` 属性, 自定义单元格样式。
+
+<template>
+  <lay-table :columns="columns1" :dataSource="dataSource1" :cellStyle="cellStyle" :rowStyle="rowStyle"></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) '}
+    ]
+
+    const cellStyle = function(row, column, rowIndex, columnIndex) {
+      if(columnIndex % 2 == 0) {
+        return 'color:red';
+      }
+    }
+
+    const rowStyle = function(row, rowIndex) {
+      if(rowIndex % 2 == 0) {
+        return 'color:blue';
+      }
+    }
+
+    return {
+      columns1,
+      dataSource1,
+      cellStyle,
+      rowStyle
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Table 属性
 :::
 
@@ -549,6 +617,11 @@ export default {
 | height               | 表格高度                      | `number`   | --   | -- |
 | maxHeight            | 表格最大高度                  | `number`   | --   | -- |
 | even                 | 斑马条纹                      | `boolean`  | `false`   | `true` `false` |
+| cellStyle            | 列样式 function(row, column, rowIndex, columnIndex)                  | `string` `function`   | -- | -- |
+| rowStyle             | 行样式 function(row, rowIndex)                  | `string` `function`  | --   | -- |
+| cellClassName        | 列类名称 function(row, column, rowIndex, columnIndex)               | `string` `function`   | --    | -- |
+| rowClassName         | 行类名称 function(row, rowIndex)                | `string` `function`  | --   | -- |
+
 :::
 
 ::: title Table 事件