<script setup lang="ts">
const data = ref('')

const datas = ref('')

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

const tableConfig = {
  column: [
    {
      title: '#',
      type: 'seq',
      width: 45,
      align: 'center'
    },
    {
      title: '姓名',
      field: 'name',
      align: 'center'
    },
    {
      title: '性别',
      align: 'center',
      slot: 'sex'
    }
  ],
  /* 实际开发应传入接口方法 */
  request: request,
  pageSize: 5
}

// 自定义数据格式
const transformData = (data: any) => {
  return data.id
}

const transformData2 = (data: any) => {
  return data.map((item: any) => item.id)
}
</script>

<template>
  <el-form label-width="80px">
    <el-row :gutter="15">
      <el-col :span="6">
        <el-form-item label="单选">
          <el-table-select v-model="data" :tableConfig="tableConfig" :transform-data="transformData">
            <template #sex="{ row }">
              <el-tag size="small">{{ row.sex }}</el-tag>
            </template>
          </el-table-select>
          选中数据： {{ data }}
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="多选">
          <el-table-select
            v-model="datas"
            :tableConfig="tableConfig"
            multiple
            tagType="success"
            :transform-data="transformData2"
          >
            <template #sex="{ row }">
              <el-tag size="small">{{ row.sex }}</el-tag>
            </template>
          </el-table-select>
          选中数据： {{ datas }}
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped></style>
