feat(TreeSelect): add className option (#4671)

src/tree-select/README.md

@@ -145,6 +145,8 @@ In every tree object, `text` property defines `id` stands for the unique key whi
     info: 3,
     // Whether to show red dot
     dot: true,
+    // ClassName of parent node
+    className: 'my-class',
     // leaves of this parent node
     children: [
       {

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

@@ -151,6 +151,8 @@ export default {
     info: 3,
     // 是否在导航名称右上角显示小红点
     dot: true,
+    // 导航节点额外类名
+    className: 'my-class',
     // 该导航下所有的可选项
     children: [
       {

src/tree-select/index.tsx

@@ -13,6 +13,7 @@ export type TreeSelectItem = {
   dot?: boolean;
   info?: string | number;
   disabled?: boolean;
+  className?: any;
   children: TreeSelectChildren[];
 };
 
@@ -62,7 +63,7 @@ function TreeSelect(
       info={item.info}
       title={item.text}
       disabled={item.disabled}
-      class={bem('nav-item')}
+      class={[bem('nav-item'), item.className]}
     />
   ));
 

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

@@ -262,7 +262,6 @@ test('max prop', () => {
     data() {
       return {
         activeId: [],
-        mainActiveIndex: 0,
         items: [
           {
             text: 'group1',
@@ -278,3 +277,21 @@ test('max prop', () => {
   items.at(1).trigger('click');
   expect(wrapper.vm.activeId).toEqual([mockItem.id]);
 });
+
+test('className of nav', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      mainActiveIndex: 0,
+      items: [
+        {
+          text: 'group1',
+          className: 'my-class',
+          children: []
+        }
+      ]
+    }
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  expect(items.at(0).element.classList.contains('my-class')).toBeTruthy();
+});