ksw-ux

注意：以下问题均为组件库使用过程中常见问题，如有其他问题，请联系组件库开发者进行处理，欢迎大家积极反馈

无法安装或无法安装指定版本的组件库依赖

目前组件库的包已经收归到公司的私有npm仓库，因此需要使用公司内网以及切换公司的npm源才能安装依赖。

bash

    npm set registry http://verdaccio.kingsware.cn/

版本更新后组件样式出现问题

请先确认组件库更新前后 Element-Plus 和 vxe-table 的版本是否一致，因为组件库是基于 Element-Plus 2.9.0 和 vxe-table 4.10.6 进行二次开发的，如果用户使用的第三方UI库版本与组件库不一致，则可能导致样式问题，因此如无特殊需求，请保持第三方UI库版本与组件库的一致性，如有特殊需求，请联系组件库开发者进行版本适配或自行处理；

KTreeTable 组件列配置中设置 treeNode 属性后，文本溢出时鼠标 hover 无法显示 tooltip

该bug是由 vxe-table 上游问题所导致的，官方已在 v4.13.27 版本中修复，低于此版本的用户可以使用组件库提供的 vxeTooltip 指令结合单元格内容插槽来解决该问题；

  import { vxeTooltip as vVxeTooltip } from '@ksware/ksw-ux';

html

<k-tree-table :data="data" :column="columns" use-tree>
  <template #id="{ row }">
    <span v-vxe-tooltip>{{ row.id }}</span>
  </template>
</k-tree-table>

KTreeTable 组件单元格溢出文本显示 tooltip 时，点击单元格内容跳转页面时 tooltip 会残留在页面上

该问题是由 vxe-table 上游问题所导致的，一般在点击单元格内容后跳转至其他页面时复现，页面跳转后 tooltip 未及时销毁导致页面残留，目前官方暂未修复，在页面跳转时可通过调用组件提供的 closeTooltip 方法手动关闭 tooltip；

  tableRef.value.closeTooltip();

表格图标相关的属性使用 vxe-table 官方示例设置图标后不生效

组件库v1.2.3之前的版本未适配 vxe-table 提供的图标功能，因此需要手动导入图标的样式，v1.2.3及之后版本已适配；

  import 'vxe-pc-ui/lib/icon/style/style.css';

树形表格使用中文或特殊字符作为 id 、 pid 等属性时，树的层级显示错误

该问题为 vxe-table 上游问题，在v4.12.0 ~ v4.13.25 版本中存在，用户可通过安装 v4.12.0 以下或 v4.13.25 以上的版本解决，如不想修改版本，可使用以下方法临时解决（如有更好的解决方案，欢迎反馈）；

  const tableData = reactive([
    { id: '测试数据1', pid: null },
    { id: '测试数据1-1', pid: '测试数据1' },
    { id: '测试数据1-2', pid: '测试数据1' }
  ]);
  // 转换 id 和 pid 属性为十六进制
  tableData.forEach((row) => {
    row.id && (row.id = stringToHex(row.id));
    row.pid && (row.pid = stringToHex(row.pid));
  });
  // string => hex
  function stringToHex(str: string) {
    if (!str) {
      return '';
    }
    const encoder = new TextEncoder();
    const bytes = encoder.encode(str.toString());
    return Array.from(bytes)
      .map((byte) => byte.toString(16).padStart(2, '0'))
      .join('');
  }

注意：在开发过程中如果需要使用 id / pid 等属性的原始值，可以将 id / pid 属性转化成原始值后再使用；

  // 场景举例：
  // 在表格中显示 id 属性的原始值，可以使用列配置的 formatter 属性和 hexToString 方法将 16 进制 id 转化成原始值
  const columns = reactive([
    {
      field: 'id',
      title: 'ID',
      formatter: ({ row }) => hexToString(row.id),
    }
    // 其他列配置
  ]);
  // hex => string
  function hexToString(hex: string) {
    if (hex.length % 2 !== 0 || /[^0-9a-fA-F]/.test(hex)) {
      return hex;
    }
    const hexArray = hex.match(/../g) ?? [];
    const bytes = new Uint8Array(hexArray.map((h) => parseInt(h, 16)));
    return new TextDecoder().decode(bytes);
  }