fs-admin/src/views/tableSelect/search.vue

<script setup lang="ts">
import FsTableSelect from '@/components/FsTableSelect/index.vue'
import type { TableConfig } from '@/components/FsTableSelect/types'

const data = ref('')
const datas = ref('')

const initValue = ref({})
const initValue2 = ref<Array<any>>([])

const current = ref(null)

const request = function ({ pageIndex }: any) {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = {
        total: 20,
        list: [
          { name: '张三' + pageIndex, sex: '男', id: '' + pageIndex + 1 },
          { name: '李四' + pageIndex, sex: '女', id: '' + pageIndex + 2 },
          { name: '王五' + pageIndex, sex: '男', id: '' + pageIndex + 3 },
          { name: '赵六' + pageIndex, sex: '女', id: '' + pageIndex + 4 },
          { name: '张三' + pageIndex, sex: '男', id: '' + pageIndex + 5 }
        ]
      }
      resolve(data)
    }, 500)
  })
}

const tableConfig: TableConfig = {
  column: [
    {
      title: '#',
      type: 'seq',
      width: 45,
      align: 'center'
    },
    {
      title: '姓名',
      field: 'name',
      align: 'center'
    },
    {
      title: '性别',
      align: 'center',
      slot: 'sex'
    }
  ],
  datasource: request,
  total: 100,
  pageSize: 5
}

const tableSelectChange = (value: any) => {
  current.value = value
}

const tableSelectClear = () => {
  current.value = null
}

const tableSelectItemClear = ({ list }: any) => {
  current.value = list
}

const tableSelectRef = ref()
const tableSelectRef2 = ref()
const form = ref({
  name: '',
  sex: ''
})

const search = () => {
  tableSelectRef.value.reload({ pageIndex: 1, ...form.value })
}
const search2 = () => {
  tableSelectRef2.value.reload({ pageIndex: 1, ...form.value })
}

const setInitValue = () => {
  initValue.value = { name: '张三2', sex: '男', id: '21' }
  initValue2.value = [
    { name: '李四2', sex: '女', id: '22' },
    { name: '王五3', sex: '男', id: '33' },
    { name: '王五4', sex: '男', id: '43' },
    { name: '赵六4', sex: '女', id: '44' }
  ]
}
</script>

<template>
  <el-form label-width="90px">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" @click="setInitValue">设置回显数据</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="单选" prop="name">
          <fs-table-select
            v-model="data"
            :tableConfig="tableConfig"
            :init-value="initValue"
            @change="tableSelectChange"
            @clear="tableSelectClear"
            @item-clear="tableSelectItemClear"
            ref="tableSelectRef"
          >
            <template #top-extra>
              <el-form :model="form" label-width="40px">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="姓名">
                      <el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="性别" prop="sex">
                      <el-select placeholder="请选择性别" v-model="form.sex"></el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" @click="search">查询</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </template>
            <template #sex="{ row }">
              <el-tag size="small">{{ row.sex }}</el-tag>
            </template>
          </fs-table-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="多选">
          <fs-table-select
            v-model="datas"
            :init-value="initValue2"
            :tableConfig="tableConfig"
            multiple
            ref="tableSelectRef2"
          >
            <template #top-extra>
              <el-form :model="form" label-width="40px">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="姓名" prop="name">
                      <el-input placeholder="请填写姓名" :maxLength="20" v-model="form.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="性别" prop="sex">
                      <el-select placeholder="请选择性别" v-model="form.sex"></el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" @click="search2">查询</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </template>
            <template #sex="{ row }">
              <el-tag size="small">{{ row.sex }}</el-tag>
            </template>
          </fs-table-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped></style>