增加tag类型、增加最多显示多少个tag

src/components/FsTableSelect/index.vue

@@ -35,6 +35,21 @@ export default defineComponent({
       return props.clearable && !props.disabled && !isEmpty.value
     })
 
+    // 多选显示的标签
+    const currentValues = computed(() => {
+      if (selectLabel.value == null) {
+        return selectLabel.value ?? []
+      }
+      return selectLabel.value.slice(0, props.maxTagCount)
+    })
+    // 多选折叠的标签
+    const omittedValues = computed(() => {
+      if (selectLabel.value == null) {
+        return []
+      }
+      return selectLabel.value.slice(props.maxTagCount)
+    })
+
     onMounted(() => {
       if (props.initValue) {
         initValueChange(props.initValue)
@@ -115,6 +130,7 @@ export default defineComponent({
         } else {
           selectLabel.value = value[props.labelKey] as any
         }
+        updateModelValue(props.multiple ? value.map((x: any) => x[props.valueKey]) : value[props.valueKey])
       }
     }
 
@@ -186,6 +202,8 @@ export default defineComponent({
       visible,
       isEmpty,
       loading,
+      currentValues,
+      omittedValues,
       tableData,
       closeEnable,
       onFocus,
@@ -213,7 +231,7 @@ export default defineComponent({
     teleported
   >
     <template #reference>
-      <div class="table-select-container">
+      <div class="table-select-container" :class="{ 'table-multiple-select': multiple }">
         <el-input
           :size="size"
           :disabled="disabled"
@@ -245,17 +263,20 @@ export default defineComponent({
         </el-input>
         <div class="table-select-multiple" v-if="multiple">
           <el-tag
-            type="info"
+            :type="tagType"
             size="small"
             disable-transitions
             closable
             style="margin-right: 5px"
-            v-for="item in selectLabel"
+            v-for="item in currentValues"
             :key="item[valueKey]"
             @close="onItemClear(item)"
           >
             {{ item[labelKey] }}
           </el-tag>
+          <el-tag v-if="omittedValues && omittedValues.length" size="small" disable-transitions :type="tagType">
+            + {{ omittedValues.length }} ...
+          </el-tag>
         </div>
       </div>
     </template>
@@ -324,13 +345,23 @@ export default defineComponent({
     }
   }
 }
+.table-multiple-select {
+  :deep(.el-input) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}
 .table-select-multiple {
-  position: absolute;
+  position: relative;
   top: 0px;
   width: calc(100% - 24px);
   height: 100%;
+  min-height: 30px;
   z-index: 2;
-  padding: 4px 10px;
+  padding: 2px 10px 4px 10px;
   box-sizing: border-box;
 }
 .table-select-pagination {

src/components/FsTableSelect/props.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type { InputProps, PopoverProps } from 'element-plus'
+import type { InputProps, PopoverProps, TagProps } from 'element-plus'
 import type { PropType } from 'vue'
 import type { TableConfig } from './types'
 
@@ -67,6 +67,16 @@ export const tableSelectProps = {
       data: [],
       total: 0
     }
+  },
+  // tag 类型
+  tagType: {
+    type: String as PropType<TagProps['type']>,
+    default: 'info'
+  },
+  // 最多显示多少个tag
+  maxTagCount: {
+    type: Number,
+    default: 5
   }
 }
 

src/views/tableSelect/index.vue

@@ -64,8 +64,8 @@ const tableSelectItemClear = ({ list }: any) => {
     <div class="w-230px">
       <fs-table-select
         v-model="data"
+        multiple
         :tableConfig="tableConfig"
-        :init-value="{ id: '11', name: '张三' }"
         @change="tableSelectChange"
         @clear="tableSelectClear"
         @item-clear="tableSelectItemClear"