组件 th-table Invalid prop: type check failed for prop “tdsize“.

错误信息

Invalid prop: type check failed for prop "tdsize". Expected Number with value 22, got String with value "22".

说明：组件 th-table 的 tdsize 属性期望接收一个 Number 类型（数字），但你传入的是字符串 "22"。

原因分析

在 Vue 模板中，如果你这样写：

<tdsize="22">

Vue 会把它当作 字符串（String） 传递，因为这是 HTML 属性的默认行为。

而组件内部定义 tdsize 的 prop 类型为 Number：

props: {
  tdsize: {
    type: Number,
    default: 16
  }
}

所以类型校验失败，报错。

解决方法：使用 `v-bind`（或简写 `:`）传递数字

将字符串 "22" 改为 JavaScript 表达式中的数字 22，通过 : 绑定：

正确写法：

<th-table
  :column="column"
  :listData="productSelected"
  :tdClick="tdClick"
  height="0.5"
  :stripe="true"
  :border="false"
  :loading="false"
  thsize="24"
  :tdsize="22"   <!--  注意这里加了 : -->
>

:tdsize="22" 等价于 v-bind:tdsize="22"，此时 22 是 JavaScript 中的 数字字面量，不是字符串。

补充说明

写法	类型	说明
`tdsize="22"`	String `"22"`	会被当作字符串
`:tdsize="22"`	Number `22`	正确传数字
`:tdsize="22.5"`	Number `22.5`	支持小数
`:tdsize="'22'"`	String `"22"`	即使用了 `:`，加了引号还是字符串

其他类似属性也要注意

你的代码中还有：

thsize="24"

如果 thsize 也是期望 Number 类型，同样需要改为：

:thsize="24"

否则未来也可能报类似错误。

最终修正代码

<th-table
  :column="column"
  :listData="productSelected"
  :tdClick="tdClick"
  height="0.5"
  :stripe="true"
  :border="false"
  :loading="false"
  :thsize="24"
  :tdsize="22"
>

现在 thsize 和 tdsize 都会以 Number 类型 传入，不再报错。

如果你不确定哪些 prop 需要数字，可以查看 th-table 组件的文档或源码中的 props 定义。一般来说，涉及尺寸、数量、布尔值的 prop，都建议用 : 绑定。