wd-select-picker 组件添加附加数据功能，关联 issue #1401

docs/component/select-picker.md

@@ -320,6 +320,41 @@ function handleConfirm({ value, selectedItems }) {
 }
 ```
 
+## 附加数据
+
+通过插槽在显示选项的附加数据。在这个例子中，显示 additional 的数据
+
+```javascript
+const columns3 = ref<Record<string, any>[]>([
+  {
+    value: '101',
+    label: '男装',
+    additional: {
+      mobile: 13800138000,
+      position: 'manager'
+    }
+  },
+  ...
+])
+```
+
+```vue
+<wd-select-picker
+  :label="$t('fu-jia-shu-ju')"
+  type="radio"
+  :show-confirm="false"
+  v-model="value20"
+  :columns="columns3"
+  @confirm="handleConfirm2"
+>
+  <template #addition="{ item }">
+    <wd-tag type="primary" round>{{ item.additional.position }}</wd-tag>
+    <wd-tag icon="phone" type="success" round>{{ item.additional.mobile }}</wd-tag>
+  </template>
+</wd-select-picker>
+
+```
+
 ## Attributes
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |

src/locale/en-US.json

@@ -462,6 +462,7 @@
   "form-demo4-title": "Validation Prompt Method",
   "form-title": "Form",
   "fu-gai-shang-chuan": "Overlay upload",
+  "fu-jia-shu-ju": "Additional data",
   "fu-shun": "Fushun",
   "fu-tian-qu": "Futian District",
   "fu-xin": "Fuxin",

src/locale/zh-CN.json

@@ -463,6 +463,7 @@
   "form-demo4-title": "校验提示方式",
   "form-title": "Form 表单",
   "fu-gai-shang-chuan": "覆盖上传",
+  "fu-jia-shu-ju": "附加数据",
   "fu-shun": "抚顺",
   "fu-tian-qu": "福田区",
   "fu-xin": "阜新",

src/subPages/selectPicker/Index.vue

@@ -54,6 +54,19 @@
           :columns="columns1"
           @confirm="handleConfirm2"
         />
+        <wd-select-picker
+          :label="$t('fu-jia-shu-ju')"
+          type="radio"
+          :show-confirm="false"
+          v-model="value20"
+          :columns="columns3"
+          @confirm="handleConfirm2"
+        >
+          <template #addition="{ item }">
+            <wd-tag type="primary" round>{{ item.additional.position }}</wd-tag>
+            <wd-tag icon="phone" type="success" round>{{ item.additional.mobile }}</wd-tag>
+          </template>
+        </wd-select-picker>
       </wd-cell-group>
     </view>
     <demo-block :title="$t('label-bu-chuan')" transparent>
@@ -149,6 +162,104 @@ const columns2 = ref<Record<string, any>[]>([
     label: t('nv-zhuang-0')
   }
 ])
+const columns3 = ref<Record<string, any>[]>([
+  {
+    value: '101',
+    label: t('nan-zhuang'),
+    additional: {
+      mobile: 13800138000,
+      position: 'manager'
+    }
+  },
+  {
+    value: '102',
+    label: t('she-chi-pin'),
+    additional: {
+      mobile: 10000,
+      position: 'telecom'
+    }
+  },
+  {
+    value: '103',
+    label: t('nv-zhuang'),
+    additional: {
+      mobile: 10010,
+      position: 'unicom'
+    }
+  },
+  {
+    value: '104',
+    label: t('xie-xue'),
+    additional: {
+      mobile: 10086,
+      position: 'mobile'
+    }
+  },
+  {
+    value: '105',
+    label: t('nei-yi-pei-shi'),
+    additional: {
+      mobile: 110,
+      position: 'police'
+    }
+  },
+  {
+    value: '106',
+    label: t('xiang-bao'),
+    additional: {
+      mobile: 120,
+      position: 'ambulance'
+    }
+  },
+  {
+    value: '107',
+    label: t('mei-zhuang-hu-fu'),
+    additional: {
+      mobile: 510000,
+      position: 'postcode'
+    }
+  },
+  {
+    value: '108',
+    label: t('ge-xing-qing-jie'),
+    additional: {
+      mobile: 13800138000,
+      position: 'staff'
+    }
+  },
+  {
+    value: '109',
+    label: t('zhong-biao-zhu-bao'),
+    additional: {
+      mobile: 13800138000,
+      position: 'manager'
+    }
+  },
+  {
+    value: '110',
+    label: t('shou-ji'),
+    additional: {
+      mobile: 13800138000,
+      position: 'manager'
+    }
+  },
+  {
+    value: '111',
+    label: t('shu-ma'),
+    additional: {
+      mobile: 13800138000,
+      position: 'manager'
+    }
+  },
+  {
+    value: '112',
+    label: t('dian-nao-ban-gong'),
+    additional: {
+      mobile: 13800138000,
+      position: 'manager'
+    }
+  }
+])
 const value1 = ref<string[]>(['101'])
 const value2 = ref<string>('101')
 const value3 = ref<string[]>(['102'])

src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss

@@ -18,6 +18,14 @@
 }
 
 @include b(select-picker) {
+  :deep(.addition) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    padding: 0 0.5em;
+    box-sizing: border-box;
+  }
    @include edeep(cell) {
     @include when(disabled) {
       .wd-cell__value {

src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue

@@ -74,6 +74,9 @@
                 <block v-else>
                   {{ item[labelKey] }}
                 </block>
+                <view class="addition">
+                  <slot name="addition" :item="item" />
+                </view>
               </wd-checkbox>
             </view>
           </wd-checkbox-group>
@@ -91,6 +94,9 @@
                 <block v-else>
                   {{ item[labelKey] }}
                 </block>
+                <view class="addition">
+                  <slot name="addition" :item="item" />
+                </view>
               </wd-radio>
             </view>
           </wd-radio-group>