tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//350/241/250/346/240/274 xTable.md"

@@ -0,0 +1,409 @@
+# 表格 xTable
+
+## 介绍
+
+列定义用 columns 或 x-table-col。表头与 pin 行钉在滚动区外（top 表头下 / bottom 表底）；冻结列 left 写死，中间列只 translateX；#cell 每行只循环一次。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-table/x-table.uvue
+```
+
+## 使用
+
+```ts
+<x-table></x-table>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | ``<br> | `Array` | `() : any[] => [] as any[]` |
+| columns | ``<br> | `Array` | `() : xTableColumns[] => [] as xTableColumns[]` |
+| rowKey | ``<br> | `string` | `"key"` |
+| width | ``<br> | `string` | `"100%"` |
+| height | ``<br> | `string` | `"auto"` |
+| maxHeight | ``<br> | `string` | `""` |
+| cellHeight | ``<br> | `string` | `"44"` |
+| fontSize | ``<br> | `string` | `"14"` |
+| fontColor | ``<br> | `string` | `"#333333"` |
+| fontDarkColor | ``<br> | `string` | `"#dedede"` |
+| headerBgColor | ``<br> | `string` | `"#f5f5f7"` |
+| darkHeaderBgColor | ``<br> | `string` | `""` |
+| headerFontColor | ``<br> | `string` | `"#333333"` |
+| ripple | ``<br> | `boolean` | `true` |
+| rippleColor | ``<br> | `string` | `"#fafafa"` |
+| rippleDarkColor | ``<br> | `string` | `""` |
+| rowCellColor | ``<br> | `string` | `"#ffffff"` |
+| rowCellDarkColor | ``<br> | `string` | `""` |
+| selectable | ``<br> | `boolean` | `false` |
+| refresh | ``<br> | `xTableRefreshFun` | `() : xTableRefreshFun => {     return null }` |
+| showScrollbar | ``<br> | `boolean` | `false` |
+| hideHead | ``<br> | `boolean` | `false` |
+| showCheck | ``<br> | `boolean` | `false` |
+| checkValue | ``<br> | `Array` | `() : string[] => [] as string[]` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| cellClick | `-` | - |
+| checkChange | `-` | - |
+| refresh | `-` | - |
+| update:checkValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `-` | - |
+| cell | `-` | - |
+| refresh | `-` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/table
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">表格 xTable</x-text>
+		<x-text color="#999999">列用 columns 或 x-table-col。表头与 pin 行钉在滚动区外；左右冻结三栏同步；单元格只走 #cell。</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">勾选 + 排序</x-text>
+		<x-text color="#999999" class="mb-12">表格定高 280px，表头钉住，底部「合计」pin:bottom 钉在表底不进滚动。点「年龄」「分数」排序。已选 {{ checkValue.length }} 行。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listCheck" :columns="columnsCheck" row-key="key" :show-check="true"
+			v-model:check-value="checkValue" height="280px" @check-change="onCheckChange"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">左右冻结 + 横滑</x-text>
+		<x-text color="#999999" class="mb-12">姓名左冻、操作右冻，中间列横滑。冻结列请写死 px / rpx。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listFreeze" :columns="columnsFreeze" row-key="key" max-height="260px"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">分组表头</x-text>
+		<x-text color="#999999" class="mb-12">columns 写 children。分组标题不要跨冻结边界。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listGroup" :columns="columnsGroup" row-key="key" max-height="240px"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">钉住行 + 合并列</x-text>
+		<x-text color="#999999" class="mb-12">row.pin 为 top 钉在表头下，bottom 钉在表底；row.merge[字段].colspan 只在同一冻结区内向右合并。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listPin" :columns="columnsPin" row-key="key" max-height="280px"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">x-table-col + #cell</x-text>
+		<x-text color="#999999" class="mb-12">20 行 + 左右冻结，定高 280px。竖滑表体、横滑中间列，用来测上下左右一起滚；#cell 按 column.key 分支。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listCell" row-key="key" height="280px" @cell-click="onCellClick">
+			<x-table-col field="name" title="姓名" width="100px" fixed="left"></x-table-col>
+			<x-table-col field="age" title="年龄" width="80px" :sorter="true"></x-table-col>
+			<x-table-col field="city" title="城市" width="100px"></x-table-col>
+			<x-table-col field="address" title="地址" width="180px"></x-table-col>
+			<x-table-col field="extra" title="备注" width="120px"></x-table-col>
+			<x-table-col field="score" title="分数" width="72px"></x-table-col>
+			<x-table-col field="action" title="操作" width="88px" fixed="right"></x-table-col>
+			<template #cell="{ row, column }">
+				<x-button v-if="column.key == 'action'" size="small" @click="onEdit(row)">编辑</x-button>
+				<x-text v-else-if="column.key == 'age'" color="primary">{{ row.age }}</x-text>
+				<x-text v-else>{{ cellValue(row, column.key) }}</x-text>
+			</template>
+		</x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">触底加载</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listMore" :columns="columnsMore" row-key="key" max-height="220px" :refresh="loadMore"></x-table>
+	</x-sheet>
+
+	<x-modal v-model:show="showEdit">
+		<x-input v-model="editName"></x-input>
+		<x-text class="mt-12" color="#999999">演示用，确认后不写回列表。</x-text>
+	</x-modal>
+
+	<view class="py-32"></view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue"
+	import { xTableColumns } from "@/uni_modules/tmx-ui/interface.uts"
+
+	type DemoMergeCell = {
+		colspan : number
+	}
+	type DemoMerge = {
+		address : DemoMergeCell
+	}
+	type DemoStyleCell = {
+		background : string
+		color : string
+		align : string
+	}
+	type DemoStyles = {
+		age : DemoStyleCell
+	}
+	type DemoRow = {
+		key : string
+		name : string
+		age : string
+		address : string
+		city : string
+		extra : string
+		score : string
+		action : string
+		pin : string
+		checkable : boolean
+		merge : DemoMerge | null
+		styles : DemoStyles | null
+	}
+
+	function rowOf(
+		key : string,
+		name : string,
+		age : string,
+		address : string,
+		city : string,
+		extra : string,
+		score : string
+	) : DemoRow {
+		return {
+			key: key,
+			name: name,
+			age: age,
+			address: address,
+			city: city,
+			extra: extra,
+			score: score,
+			action: "编辑",
+			pin: "",
+			checkable: true,
+			merge: null,
+			styles: null
+		}
+	}
+
+	const checkValue = ref<string[]>([])
+	const showEdit = ref<boolean>(false)
+	const editName = ref<string>("")
+
+	const listCheck : DemoRow[] = [
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园", "杭州", "A", "88"),
+		rowOf("2", "胡彦祖", "42", "西湖区湖底公园", "杭州", "B", "76"),
+		rowOf("3", "李雷", "28", "滨江区网商路", "杭州", "C", "91"),
+		rowOf("4", "韩梅梅", "25", "余杭区文一西路", "杭州", "D", "85"),
+		rowOf("5", "王芳", "36", "上城区延安路", "杭州", "E", "70"),
+		rowOf("6", "赵强", "19", "拱墅区大关路", "杭州", "F", "95"),
+		rowOf("7", "周杰", "31", "西湖区杨公堤", "杭州", "G", "82"),
+		rowOf("8", "吴娜", "27", "滨江区长河路", "杭州", "H", "93"),
+		rowOf("9", "郑凯", "45", "余杭区仓前", "杭州", "I", "68"),
+		rowOf("10", "冯敏", "22", "上城区清河坊", "杭州", "J", "90"),
+		rowOf("11", "陈峰", "38", "拱墅区湖墅南路", "杭州", "K", "74"),
+		rowOf("12", "蒋雪", "29", "西湖区文三路", "杭州", "L", "86"),
+		rowOf("13", "沈涛", "33", "滨江区江南大道", "杭州", "M", "79"),
+		rowOf("14", "曹丽", "24", "余杭区未来科技城", "杭州", "N", "97"),
+		rowOf("15", "许洋", "41", "上城区解放路", "杭州", "O", "71"),
+		rowOf("16", "袁洁", "26", "拱墅区运河边", "杭州", "P", "84"),
+		rowOf("sum", "合计", "-", "共16行", "", "", "1329")
+	]
+	listCheck[2].checkable = false
+	listCheck[16].pin = "bottom"
+	listCheck[16].checkable = false
+
+	const columnsCheck : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "28%", sorter: false, align: "left" },
+		{ title: "年龄", key: "age", width: "22%", sorter: true },
+		{ title: "城市", key: "city", width: "22%" },
+		{ title: "分数", key: "score", width: "28%", sorter: true }
+	]
+
+	const listFreeze : DemoRow[] = [
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园1号", "杭州", "备注甲", "88"),
+		rowOf("2", "胡彦祖", "42", "西湖区湖底公园2号", "杭州", "备注乙", "76"),
+		rowOf("3", "李雷", "28", "滨江区网商路88号", "杭州", "备注丙", "91"),
+		rowOf("4", "韩梅梅", "25", "余杭区文一西路", "杭州", "备注丁", "85"),
+		rowOf("5", "王芳", "36", "上城区延安路", "杭州", "备注戊", "70")
+	]
+
+	const columnsFreeze : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "96px", fixed: "left", align: "left" },
+		{ title: "年龄", key: "age", width: "72px" },
+		{ title: "城市", key: "city", width: "88px" },
+		{ title: "地址", key: "address", width: "180px", align: "left" },
+		{ title: "备注", key: "extra", width: "120px" },
+		{ title: "分数", key: "score", width: "72px", sorter: true },
+		{ title: "操作", key: "action", width: "80px", fixed: "right" }
+	]
+
+	const listGroup : DemoRow[] = [
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园", "杭州", "A组", "88"),
+		rowOf("2", "胡彦祖", "42", "滨江区网商路", "杭州", "B组", "76"),
+		rowOf("3", "李雷", "28", "余杭区文一西路", "杭州", "C组", "91")
+	]
+
+	const columnsGroup : xTableColumns[] = [
+		{
+			title: "基本信息",
+			key: "base",
+			children: [
+				{ title: "姓名", key: "name", width: "100px", align: "left" },
+				{ title: "年龄", key: "age", width: "80px", sorter: true }
+			]
+		},
+		{
+			title: "联系",
+			key: "contact",
+			children: [
+				{ title: "城市", key: "city", width: "90px" },
+				{ title: "地址", key: "address", width: "160px", align: "left" }
+			]
+		},
+		{ title: "分数", key: "score", width: "80px", sorter: true }
+	]
+
+	const listPin : DemoRow[] = [
+		rowOf("0", "合计", "-", "3 人在杭", "-", "-", "259"),
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园1号", "杭州", "A", "88"),
+		rowOf("2", "胡彦祖", "42", "西湖区湖底公园2号", "杭州", "B", "76"),
+		rowOf("3", "李雷", "28", "滨江区网商路", "杭州", "C", "91"),
+		rowOf("4", "韩梅梅", "25", "余杭区文一西路", "杭州", "D", "85")
+	]
+	listPin[0].pin = "top"
+	listPin[0].merge = { address: { colspan: 2 } }
+	listPin[0].styles = { age: { background: "#7e6539", color: "#ffffff", align: "center" } }
+	listPin[3].styles = { age: { background: "#e8f4ff", color: "#0091FF", align: "center" } }
+
+	const columnsPin : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "22%", align: "left" },
+		{ title: "年龄", key: "age", width: "18%", sorter: true },
+		{ title: "地址", key: "address", width: "38%", align: "left" },
+		{ title: "城市", key: "city", width: "22%" }
+	]
+
+	function makeScrollRows(prefix : string, n : number) : DemoRow[] {
+		const names : string[] = ["胡彦斌", "胡彦祖", "李雷", "韩梅梅", "王芳", "赵强", "周杰", "吴娜", "郑凯", "冯敏"]
+		const cities : string[] = ["杭州", "上海", "北京", "深圳"]
+		const addrs : string[] = ["西湖区湖底公园", "滨江区网商路", "余杭区文一西路", "上城区延安路", "拱墅区大关路"]
+		const out : DemoRow[] = []
+		for (let i = 0; i < n; i++) {
+			const no = (i + 1).toString()
+			out.push(rowOf(
+				prefix + no,
+				names[i % names.length],
+				(20 + (i % 26)).toString(),
+				addrs[i % addrs.length] + no + "号",
+				cities[i % cities.length],
+				"备注" + no,
+				(60 + (i % 40)).toString()
+			))
+		}
+		return out
+	}
+
+	const listCell : DemoRow[] = makeScrollRows("c", 20)
+
+	const listMore = ref<DemoRow[]>([
+		rowOf("1", "行 1", "21", "触底继续加载", "杭州", "", "60"),
+		rowOf("2", "行 2", "22", "触底继续加载", "杭州", "", "61"),
+		rowOf("3", "行 3", "23", "触底继续加载", "杭州", "", "62"),
+		rowOf("4", "行 4", "24", "触底继续加载", "杭州", "", "63"),
+		rowOf("5", "行 5", "25", "触底继续加载", "杭州", "", "64")
+	])
+
+	const columnsMore : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "30%" },
+		{ title: "年龄", key: "age", width: "20%", sorter: true },
+		{ title: "地址", key: "address", width: "50%", align: "left" }
+	]
+
+	function onCheckChange(ids : string[]) : void {
+		console.log("check", ids)
+	}
+
+	function cellValue(row : DemoRow, key : string) : string {
+		if (key == "name") return row.name
+		if (key == "age") return row.age
+		if (key == "address") return row.address
+		if (key == "city") return row.city
+		if (key == "extra") return row.extra
+		if (key == "score") return row.score
+		if (key == "action") return row.action
+		return ""
+	}
+
+	function onEdit(row : DemoRow) : void {
+		editName.value = row.name
+		showEdit.value = true
+	}
+
+	function onCellClick(row : DemoRow, key : string) : void {
+		if (key == "action") return
+		console.log("cell", row.key, key)
+	}
+
+	async function loadMore() : Promise<void> {
+		await new Promise<void>((resolve) => {
+			setTimeout(() => {
+				const n = listMore.value.length + 1
+				listMore.value.push(rowOf(n.toString(), "行 " + n.toString(), (20 + n).toString(), "新加载地址", "杭州", "", (50 + n).toString()))
+				resolve()
+			}, 500)
+		})
+	}
+</script>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)