@befe/brick-comp-cascade v0.2.103

FAQ

如何理解 “值” 类型

interface CascadeOption {
    value: string | number
    label: string
    children?: CascadeOption[]
}

type CascadeSelectedValue = CascadeOption['value']
type CascadeValueSingle = CascadeSelectedValue[]
type CascadeValueMultiple = CascadeSelectedValue[][]

// e.g.
const singleValue = ['guangdong', 'guangzhou', 'yuexiu'] // 广东省 > 广州市 > 越秀区
const multipleValue = [
    // ...
    ['guangdong', 'guangzhou', 'yuexiu'],   // 广东省 > 广州市 > 越秀区
    ['guangdong', 'guangzhou', 'liwan'],    // 广东省 > 广州市 > 荔湾区
    // ...
]

如上所示，['guangdong', 'guangzhou', 'yuexiu'] 称之为一个选择值 CascadeSelectedValue，可理解为 “一个选中值的‘完整’级联路径”：

• 末端节点 value 'yuexiu' 表示 越秀区 被勾选
• 末端以前的节点链 'guangdong', 'guangzhou' 表示要选中 越秀区 ，需要经过祖先路径 广东省 > 广州市

以 “完整” 级联路径作为选择值，会造成一定的数据冗余，比如 “全选广东省（所有子孙）”，其值将如

const multipleValue = [
    ['guangdong'],                          // ✅广东省
    ['guangdong', 'guangzhou'],             // 广东省 > ✅ 广州市
    // ...                                  // ...
    ['guangdong', 'guangzhou', 'yuexiu'],   // 广东省 > 广州市 > ✅越秀区
    ['guangdong', 'guangzhou', 'liwan'],    // 广东省 > 广州市 > ✅荔湾区
    // ...                                  // ...
    ['guangdong', 'shenzhen'],              // 广东省 > ✅深圳市
    ['guangdong', 'shenzhen', 'nanshan'],   // 广东省 > 深圳市 > ✅南山区
    // ...
]

显然其中路径信息是冗余的 （e.g. 对于选中项 越秀区, 荔湾区 来说，路径信息都是 广东省 > 广州市 ）

而这种冗余，综合权衡，是利大于弊的

• 首先，选中的路径信息，对于回填显示是必要的
  • 尤其对于 lazy options 的情况，需要逐级加载，如果 value 没有路径信息，则需要根据 value 进行 options 的预置
  • “路径放在 value 里” 比 “预置 options” 在使用上更简便和易于理解
• 其次，基于用户交互的选择，选择结果数量是很有限的，冗余不会造成实质性的数据空间、性能问题
  • 如果真的很在意持久化的存储空间，自行结合 options 进行压缩处理起来也不复杂