设置分页回显数据显示

src/components/FsTableSelect/index.vue

@@ -35,6 +35,12 @@ export default defineComponent({
       return props.clearable && !props.disabled && !isEmpty.value
     })
 
+    onMounted(() => {
+      if (props.initValue) {
+        initValueChange(props.initValue)
+      }
+    })
+
     /* 打开弹窗 */
     const onFocus = (e: FocusEvent) => {
       if (props.automaticDropdown && !visible.value) {
@@ -100,6 +106,18 @@ export default defineComponent({
       emit('change', selectLabel.value)
     }
 
+    /* initValue 改变 */
+    const initValueChange = (value: any | Array<any>) => {
+      if (props.initValue) {
+        // 处理回显数据
+        if (props.multiple) {
+          selectLabel.value = value as Array<any>
+        } else {
+          selectLabel.value = value[props.labelKey] as any
+        }
+      }
+    }
+
     /* 分页改变事件 */
     const paginationChange = (data: number) => {
       pageIndex.value = data
@@ -108,17 +126,20 @@ export default defineComponent({
 
     /* 表格请求完成 */
     const tableDone = () => {
-      if (props.multiple) {
-        nextTick(() => {
-          const newTableData = tableRef.value?.getTableData().tableData
-          newTableData?.forEach(item => {
+      nextTick(() => {
+        const newTableData = tableRef.value?.getTableData().tableData
+        newTableData?.forEach(item => {
+          if (props.multiple) {
             const temp =
               Array.isArray(selectLabel.value) &&
               selectLabel.value.find(x => x[props.valueKey] === item[props.valueKey])
             temp && tableRef.value?.setCheckboxRow(item, true)
-          })
+          } else {
+            const temp = item[props.valueKey] === props.modelValue
+            temp && tableRef.value?.setRadioRow(item)
+          }
         })
-      }
+      })
     }
 
     /* 请求数据 */
@@ -150,6 +171,14 @@ export default defineComponent({
     const updateModelValue = (value: any) => {
       emit('update:modelValue', value)
     }
+
+    watch(
+      () => props.initValue,
+      () => {
+        initValueChange(props.initValue as object | Array<any>)
+      }
+    )
+
     return {
       popoverRef,
       tableRef,

src/components/FsTableSelect/props.ts

@@ -33,7 +33,7 @@ export const tableSelectProps = {
   // label 的属性名
   labelKey: {
     type: String,
-    default: 'label'
+    default: 'name'
   },
   // 回显数据，用于后段分页显示
   initValue: [Object, Array],

src/views/tableSelect/index.vue

@@ -2,7 +2,7 @@
 import FsTableSelect from '@/components/FsTableSelect/index.vue'
 import type { TableConfig } from '@/components/FsTableSelect/types'
 
-const data = ref()
+const data = ref('')
 const current = ref(null)
 
 const request = function ({ pageIndex }: any) {
@@ -64,9 +64,8 @@ const tableSelectItemClear = ({ list }: any) => {
     <div class="w-230px">
       <fs-table-select
         v-model="data"
-        label-key="name"
-        multiple
         :tableConfig="tableConfig"
+        :init-value="{ id: '11', name: '张三' }"
         @change="tableSelectChange"
         @clear="tableSelectClear"
         @item-clear="tableSelectItemClear"