Update 优化Table组件点击选中逻辑

UI/VAP_V3.VUE/src/components/table/models.ts

@@ -13,6 +13,7 @@ export interface Header {
 	isSort?: boolean
 	visible?: boolean
 	disabled?: boolean
+	canClick?: boolean|((c: Header,r:any)=> boolean)
 	tooltip?: boolean | string
 	thClass?: string
 	tdClass?: string

UI/VAP_V3.VUE/src/components/table/partials/body/BodyTd.vue

@@ -57,6 +57,9 @@ const tdStyle = computed(() => {
 	if (props.isTree && props.column.field == propsOpts.iconField) {
 		style.textAlign = "left"
 	}
+	if (canClick.value) {
+		style.cursor = "pointer"
+	}
 	return style
 })
 
@@ -70,6 +73,23 @@ const tdClass = computed(() => {
 	}
 	return classStr
 })
+
+const tdName = computed(() => {
+	if (canClick.value) {
+		return `td-${props.column.field}`
+	}
+	return ""
+})
+
+const canClick = computed(() => {
+	if (props.column.canClick === undefined) {
+		return true
+	}
+	if (typeof props.column.canClick == "function") {
+		return props.column.canClick(props.column, row.value)
+	}
+	return props.column.canClick
+})
 const onToggle = () => {
 	if (!isLeaf.value) {
 		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.tree-toggle", row.value)
@@ -82,7 +102,7 @@ function init() {
 onMounted(init)
 </script>
 <template>
-	<td :style="tdStyle" :class="tdClass" :rowspan="rowspan" :name="`td-${column.field}`">
+	<td :style="tdStyle" :class="tdClass" :rowspan="rowspan" :name="tdName">
 		<span
 			v-if="isTree && column.field == propsOpts.iconField"
 			@click="onToggle"

UI/VAP_V3.VUE/src/components/table/partials/body/BodyTr.vue

@@ -69,9 +69,34 @@ const onDbRowClick = (event: Event) => {
 	}
 }
 function canTriggerClickEvent(target: HTMLElement) {
-	let name = target.getAttribute("name")
+	const td = findTd(target)
+	if (!td) return false
+	let name = td.getAttribute("name")
 	return name?.indexOf("td-") === 0
 }
+function findTd(element: HTMLElement): HTMLElement | null {
+	if (element.tagName.toLowerCase() === "td") {
+		return element
+	}
+	let parent = element.parentElement
+	while (parent) {
+		if (parent.tagName.toLowerCase() === "td") {
+			return parent
+		}
+		if (
+			parent.classList.contains("el-switch") ||
+			parent.classList.contains("el-checkbox") ||
+			parent.classList.contains("el-radio") ||
+			parent.tagName.toLowerCase() === "button" ||
+			parent.tagName.toLowerCase() === "a" ||
+			parent.tagName.toLowerCase() === "input"
+		) {
+			break
+		}
+		parent = parent.parentElement
+	}
+	return null
+}
 </script>
 <template>
 	<tr