feat(TreeSelect): support show info (#4384)

src/tree-select/README.md

@@ -123,6 +123,8 @@ In every tree object, `text` property defines `id` stands for the unique key whi
   {
     // name of the parent node
     text: 'Group 1',
+    // info
+    info: 3,
     // leaves of this parent node
     children: [
       {

src/tree-select/README.zh-CN.md

@@ -129,6 +129,8 @@ export default {
   {
     // 导航名称
     text: '所有城市',
+    // 导航名称右上角徽标
+    info: 3,
     // 该导航下所有的可选项
     children: [
       {

src/tree-select/index.tsx

@@ -10,6 +10,7 @@ import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type TreeSelectItem = {
   text: string;
+  info?: string | number;
   disabled?: boolean;
   children: TreeSelectChildren[];
 };
@@ -54,8 +55,9 @@ function TreeSelect(
       : activeId === id;
   }
 
-  const Nav = items.map(item => (
+  const Navs = items.map(item => (
     <SidebarItem
+      info={item.info}
       title={item.text}
       disabled={item.disabled}
       class={bem('nav-item')}
@@ -121,7 +123,7 @@ function TreeSelect(
           emit(ctx, 'navclick', index);
         }}
       >
-        {Nav}
+        {Navs}
       </Sidebar>
       <div class={bem('content')}>{Content()}</div>
     </div>

src/tree-select/test/__snapshots__/index.spec.js.snap

@@ -24,3 +24,13 @@ exports[`height prop 1`] = `
   <div class="van-tree-select__content"></div>
 </div>
 `;
+
+exports[`nav info 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+      <div class="van-sidebar-item__text">group1<div class="van-info van-sidebar-item__info">3</div>
+      </div>
+    </a></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;

src/tree-select/test/index.spec.js

@@ -150,6 +150,21 @@ test('height prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('nav info', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          info: 3
+        }
+      ]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('use sync modifier in main-active-index', () => {
   const wrapper = mount({
     template: `