uview-plus 3.4.27 → 3.4.28

package/changelog.md

@@ -1,3 +1,8 @@
+## 3.4.28（2025-05-12）
+feat: 新增table表格组件
+
+feat: 新增element-plus风格的table2组件
+
 ## 3.4.27（2025-05-06）
 fix: 修复card组件props
 

package/components/u-table/u-table.vue

@@ -1,6 +1,8 @@
 <template>
-	<view class="u-table">
-		
+	<view class="u-table" :style="[tableStyle]">
+		<template v-if="show">
+			<slot />
+		</template>
 	</view>
 </template>
 
@@ -12,14 +14,86 @@
 	 * Table 表格 
 	 * @description 表格组件一般用于展示大量结构化数据的场景 本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成
 	 * @tutorial https://ijry.github.io/uview-plus/components/table.html
+	 * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
+	 * @property {String} bg-color 表格的背景颜色（默认#ffffff）
+	 * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
+	 * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
+	 * @property {String Number} font-size 单元格字体大小，单位rpx（默认28）
+	 * @property {String} color 单元格字体颜色（默认#606266）
+	 * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
 	 * @example <u-table><u-tr><u-th>学校</u-th </u-tr> <u-tr><u-td>浙江大学</u-td> </u-tr> <u-tr><u-td>清华大学</u-td> </u-tr></u-table>
 	 */
 	export default {
 		name: 'u-table',
 		mixins: [mpMixin, mixin, props],
+		props: {
+			borderColor: {
+				type: String,
+				default: '#e4e7ed'
+			},
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// td的内边距
+			padding: {
+				type: String,
+				default: '5px 3px'
+			},
+			// 字体大小
+			fontSize: {
+				type: [String],
+				default: '14px'
+			},
+			// 字体颜色
+			color: {
+				type: String,
+				default: '#606266'
+			},
+			// th的自定义样式
+			thStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// table的背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			}
+		},
 		data() {
 			return {
-				
+				show: true
+			}
+		},
+		watch: {
+			align() {
+				this.change();
+			},
+			borderColor() {
+				this.change();
+			}
+		},
+		computed: {
+			tableStyle() {
+				let style = {};
+				style.borderLeft = `solid 1px ${this.borderColor}`;
+				style.borderTop = `solid 1px ${this.borderColor}`;
+				style.backgroundColor = this.bgColor;;
+				return style;
+			}
+		},
+		methods: {
+			change() {
+				this.show = false;
+				this.$nextTick(() => {
+					this.show = true;
+				});
+				// this.$forceUpdate();
 			}
 		}
 	}

package/components/u-table2/u-table2.vue

@@ -0,0 +1,451 @@
+<template>
+  <view class="u-table" :style="{ height: height ? height + 'px' : 'auto' }">
+    <!-- 表头 -->
+    <view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }">
+      <view class="u-table-row">
+        <view
+          v-for="(col, colIndex) in columns"
+          :key="col.key"
+          class="u-table-cell"
+          :style="{ width: col.width ? addUnit(col.width) : 'auto', flex: col.width ? 'none' : 1 }"
+          :class="[
+            col.align ? 'u-text-' + col.align : '',
+            headerCellClassName ? headerCellClassName(col) : '',
+            col.fixed === 'left' ? 'u-table-fixed-left' : '',
+            col.fixed === 'right' ? 'u-table-fixed-right' : ''
+          ]"
+          @click="handleHeaderClick(col)"
+        >
+          {{ col.title }}
+          <view v-if="col.sortable">
+            {{ getSortIcon(col.key) }}
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 表体 -->
+    <view class="u-table-body" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
+      <block v-if="data.length > 0">
+        <template v-for="(row, index) in sortedData" :key="row[rowKey] || index">
+          <view
+            class="u-table-row"
+            :class="[
+              highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
+              rowClassName ? rowClassName(row, index) : '',
+              stripe && index % 2 === 1 ? 'u-table-row-zebra' : ''
+            ]"
+            @click="handleRowClick(row)"
+          >
+            <view
+              v-for="(col, colIndex) in columns"
+              :key="col.key"
+              class="u-table-cell"
+              :class="[
+                col.align ? 'u-text-' + col.align : '',
+                cellClassName ? cellClassName(row, col) : '',
+                col.fixed === 'left' ? 'u-table-fixed-left' : '',
+                col.fixed === 'right' ? 'u-table-fixed-right' : ''
+              ]"
+              :style="{ width: col.width ? addUnit(col.width) : 'auto', flex: col.width ? 'none' : 1 }"
+            >
+              <!-- 复选框列 -->
+              <view v-if="col.type === 'selection'">
+                <checkbox
+                  :checked="isSelected(row)"
+                  @click.stop="toggleSelect(row)"
+                />
+              </view>
+
+              <!-- 树形结构展开图标 -->
+              <view v-else-if="col.type === 'expand'" @click.stop="toggleExpand(row)">
+                {{ isExpanded(row) ? '▼' : '▶' }}
+              </view>
+
+              <!-- 默认插槽或文本 -->
+              <slot :name="col.key" :row="row">
+                {{ row[col.key] }}
+              </slot>
+            </view>
+          </view>
+
+          <!-- 子级渲染 -->
+          <template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
+            <view
+              v-for="child in row[treeProps.children]"
+              :key="child[rowKey]"
+              class="u-table-row u-table-row-child"
+            >
+              <view
+                v-for="col in columns"
+                :key="col.key"
+                class="u-table-cell"
+                :style="{ width: col.width ? addUnit(col.width) : 'auto', paddingLeft: '24px', flex: col.width ? 'none' : 1 }"
+              >
+                <slot :name="col.key" :row="child">
+                  {{ child[col.key] }}
+                </slot>
+              </view>
+            </view>
+          </template>
+        </template>
+      </block>
+      <block v-else>
+        <slot name="empty">
+          <view class="u-table-empty">暂无数据</view>
+        </slot>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+import { ref, watch, computed } from 'vue'
+import { addUnit } from '../../libs/function/index';
+
+export default {
+  name: 'u-table2',
+  props: {
+    data: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: cols =>
+        cols.every(col =>
+          ['default', 'selection', 'expand'].includes(col.type || 'default')
+        )
+    },
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: [String, Number],
+      default: null
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: null
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    highlightCurrentRow: {
+      type: Boolean,
+      default: false
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    currentRowKey: {
+      type: [String, Number],
+      default: null
+    },
+    rowStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    cellClassName: {
+      type: Function,
+      default: null
+    },
+    headerCellClassName: {
+      type: Function,
+      default: null
+    },
+    rowClassName: {
+      type: Function,
+      default: null
+    },
+    context: {
+      type: Object,
+      default: null
+    },
+    showOverflowTooltip: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    load: {
+      type: Function,
+      default: null
+    },
+    treeProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        hasChildren: 'hasChildren'
+      })
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    expandRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    sortOrders: {
+      type: Array,
+      default: () => ['ascending', 'descending']
+    },
+    sortable: {
+      type: [Boolean, String],
+      default: false
+    },
+    multiSort: {
+      type: Boolean,
+      default: false
+    },
+    sortBy: {
+      type: String,
+      default: null
+    },
+    sortMethod: {
+      type: Function,
+      default: null
+    },
+    filters: {
+      type: Object,
+      default: () => ({})
+    },
+    fixedHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: [
+    'select', 'select-all', 'selection-change',
+    'cell-click', 'row-click', 'row-dblclick',
+    'header-click', 'sort-change', 'filter-change',
+    'current-change', 'expand-change'
+  ],
+  methods: {
+    addUnit
+  },
+  setup(props, { emit }) {
+    const expandedKeys = ref([...props.expandRowKeys]);
+    const selectedRows = ref([]);
+    const sortConditions = ref([]);
+
+    // 当前高亮行
+    const currentRow = ref(null);
+
+    watch(
+      () => props.expandRowKeys,
+      newVal => {
+        expandedKeys.value = [...newVal];
+      }
+    );
+
+    watch(
+      () => props.currentRowKey,
+      newVal => {
+        const found = props.data.find(item => item[props.rowKey] === newVal);
+        if (found) {
+          currentRow.value = found;
+        }
+      }
+    );
+
+    // 过滤后的数据
+    const filteredData = computed(() => {
+      return props.data.filter(row => {
+        return Object.keys(props.filters).every(key => {
+          const filter = props.filters[key];
+          if (!filter) return true;
+          return row[key]?.toString().includes(filter.toString());
+        });
+      });
+    });
+
+    // 排序后的数据
+    const sortedData = computed(() => {
+      if (!sortConditions.value.length) return filteredData.value;
+
+      const data = [...filteredData.value];
+
+      return data.sort((a, b) => {
+        for (const condition of sortConditions.value) {
+          const { field, order } = condition;
+          let valA = a[field];
+          let valB = b[field];
+
+          if (props.sortMethod) {
+            const result = props.sortMethod(a, b, field);
+            if (result !== 0) return result * (order === 'ascending' ? 1 : -1);
+          }
+
+          if (valA < valB) return order === 'ascending' ? -1 : 1;
+          if (valA > valB) return order === 'ascending' ? 1 : -1;
+        }
+        return 0;
+      });
+    });
+
+    function handleRowClick(row) {
+      if (props.highlightCurrentRow) {
+        const oldRow = currentRow.value;
+        currentRow.value = row;
+        emit('current-change', row, oldRow);
+      }
+      emit('row-click', row);
+    }
+
+    function handleHeaderClick(column) {
+      if (!column.sortable) return;
+
+      const index = sortConditions.value.findIndex(c => c.field === column.key);
+      let newOrder = 'ascending';
+
+      if (index >= 0) {
+        if (sortConditions.value[index].order === 'ascending') {
+          newOrder = 'descending';
+        } else {
+          sortConditions.value.splice(index, 1);
+          emit('sort-change', sortConditions.value);
+          return;
+        }
+      }
+
+      if (!props.multiSort) {
+        sortConditions.value = [{ field: column.key, order: newOrder }];
+      } else {
+        if (index >= 0) {
+          sortConditions.value[index].order = newOrder;
+        } else {
+          sortConditions.value.push({ field: column.key, order: newOrder });
+        }
+      }
+
+      emit('sort-change', sortConditions.value);
+    }
+
+    function getSortIcon(field) {
+      const cond = sortConditions.value.find(c => c.field === field);
+      if (!cond) return '';
+      return cond.order === 'ascending' ? '↑' : '↓';
+    }
+
+    function toggleSelect(row) {
+      const index = selectedRows.value.findIndex(r => r[props.rowKey] === row[props.rowKey]);
+      if (index >= 0) {
+        selectedRows.value.splice(index, 1);
+      } else {
+        selectedRows.value.push(row);
+      }
+      emit('selection-change', selectedRows.value);
+      emit('select', row);
+    }
+
+    function isSelected(row) {
+      return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey]);
+    }
+
+    function toggleExpand(row) {
+      const key = row[props.rowKey];
+      const index = expandedKeys.value.indexOf(key);
+      if (index === -1) {
+        expandedKeys.value.push(key);
+      } else {
+        expandedKeys.value.splice(index, 1);
+      }
+      emit('expand-change', expandedKeys.value);
+    }
+
+    function isExpanded(row) {
+      return expandedKeys.value.includes(row[props.rowKey]);
+    }
+
+    return {
+      currentRow,
+      sortedData,
+      expandedKeys,
+      selectedRows,
+      sortConditions,
+      handleRowClick,
+      handleHeaderClick,
+      getSortIcon,
+      toggleSelect,
+      isSelected,
+      toggleExpand,
+      isExpanded
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.u-table {
+  width: 100%;
+  overflow: auto;
+}
+.u-table-header {
+  background-color: #f5f7fa;
+}
+.u-table-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.u-table-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1rpx solid #ebeef5;
+}
+.u-table-cell {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  padding: 5px 4px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.u-table-fixed-left {
+  position: sticky;
+  left: 0;
+  z-index: 9;
+}
+.u-table-fixed-right {
+  position: sticky;
+  right: 0;
+  z-index: 9;
+}
+.u-table-row-zebra {
+  background-color: #fafafa;
+}
+.u-table-row-highlight {
+  background-color: #f5f7fa;
+}
+.u-table-empty {
+  text-align: center;
+  padding: 20px;
+  color: #999;
+}
+.u-text-left {
+  text-align: left;
+}
+.u-text-center {
+  text-align: center;
+}
+.u-text-right {
+  text-align: right;
+}
+</style>

package/components/u-td/u-td.vue

@@ -1,6 +1,6 @@
 <template>
-	<view class="u-td">
-		
+	<view class="u-td" :style="[tdStyle]">
+		<slot></slot>
 	</view>
 </template>
 
@@ -8,6 +8,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, $parent } from '../../libs/function/index';
 	/** 
 	 * Td 表格中的单元格
 	 * @description 
@@ -19,9 +20,36 @@
 	export default {
 		name: 'u-td',
 		mixins: [mpMixin, mixin, props],
+		props: {
+			// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
+			width: {
+				type: [String],
+				default: 'auto'
+			}
+		},
 		data() {
 			return {
-				
+				tdStyle: {
+					
+				}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = $parent.call(this, 'u-table');
+			if (this.parent) {
+				// 将父组件的相关参数，合并到本组件
+				let style = {};
+				if (this.width != "auto") style.flex = `0 0 ${this.width}`;
+				style.textAlign = this.parent.align;
+				style.fontSize = addUnit(this.parent.fontSize);
+				style.padding = this.parent.padding;
+				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
+				style.borderRight = `solid 1px ${this.parent.borderColor}`;
+				style.color = this.parent.color;
+				this.tdStyle = style;
 			}
 		}
 	}
@@ -29,5 +57,15 @@
 
 <style lang="scss" scoped>
 	@import "../../libs/css/components.scss";
-	
+	.u-td {
+		@include flex;
+		flex-direction: column;
+		flex: 1;
+		justify-content: center;
+		font-size: 14px;
+		color: $u-content-color;
+		align-self: stretch;
+		box-sizing: border-box;
+		height: 100%;
+	}
 </style>

package/components/u-th/props.js

@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+
+    }
+})

package/components/u-th/u-th.vue

@@ -0,0 +1,67 @@
+<template>
+	<view class="u-th" :style="[thStyle]">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, $parent } from '../../libs/function/index';
+	/** 
+	 * Td 表格中的单元格
+	 * @description 
+	 * @tutorial url
+	 * @property {String | Number} 
+	 * @event {Function}
+	 * @example
+	 */
+	export default {
+		name: 'u-th',
+		mixins: [mpMixin, mixin, props],
+		props: {
+			// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
+			width: {
+				type: [String],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				thStyle: {}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = $parent.call(this, 'u-table');
+			if (this.parent) {
+				// 将父组件的相关参数，合并到本组件
+				let style = {};
+				if (this.width) style.flex = `0 0 ${this.width}`;
+				style.textAlign = this.parent.align;
+				style.padding = this.parent.padding;
+				style.borderBottom = `solid 1px ${this.parent.borderColor}`;
+				style.borderRight = `solid 1px ${this.parent.borderColor}`;
+				Object.assign(style, this.parent.thStyle);
+				this.thStyle = style;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	.u-th {
+		@include flex;
+		flex-direction: column;
+		flex: 1;
+		justify-content: center;
+		font-size: 28rpx;
+		color: $u-main-color;
+		font-weight: bold;
+		background-color: rgb(245, 246, 248);
+	}
+</style>

package/components/u-tr/u-tr.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="u-tr">
-		
+		<slot></slot>
 	</view>
 </template>
 
@@ -29,5 +29,7 @@
 
 <style lang="scss" scoped>
 	@import "../../libs/css/components.scss";
-	
+	.u-tr {
+		@include flex;
+	}
 </style>

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-	"version": "3.4.27",
+	"version": "3.4.28",
 	"description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
 	"keywords": [
         "uview",