表格列 xTableCol

---

预览

介绍

x-table 的列定义。通过 provide/inject 向父表登记列元数据，不渲染单元格。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-table-col/x-table-col.uvue

使用

<x-table-col></x-table-col>

Props 属性

名称	说明	类型	默认值
field	对应行数据字段	string	""
title	表头标题	string	""
width	列宽 px / rpx / %；空则均分剩余	string	""
sorter	是否可排序	boolean	false
fixed	left / right / 空	string	""
align	left / center / right	string	"center"

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/zhanshi/table

示例源码

uvue

<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>