tableSelect 表格下拉

基础用法

<script setup lang="ts">
const data = 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: TableConfig = {
  column: [
    {
      title: '#',
      type: 'seq',
      width: 45,
      align: 'center',
    },
    {
      title: '姓名',
      field: 'name',
      align: 'center',
    },
    {
      title: '性别',
      align: 'center',
      slot: 'sex',
    },
  ],
  /* 实际开发应传入接口方法 */
  request: request,
  pageSize: 5,
}
</script>
<template>
  <el-table-select v-model="data" :tableConfig="tableConfig">
    <template #sex="{ row }">
      <el-tag size="small">{{ row.sex }}</el-tag>
    </template>
  </el-table-select>
</template>

自定义搜索

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

const data = ref('')

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

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: TableConfig = {
  column: [
    {
      title: '#',
      type: 'seq',
      width: 45,
      align: 'center',
    },
    {
      title: '姓名',
      field: 'name',
      align: 'center',
    },
    {
      title: '性别',
      align: 'center',
      slot: 'sex',
    },
  ],
  /* 实际开发应传入接口方法 */
  request: request,
  pageSize: 5,
}

/* 重新加载表格数据 */
const search = () => {
  tableSelectRef.value.reload({ pageNo: 1, ...form.value })
}
</script>
<template>
  <el-table-select v-model="data" :tableConfig="tableConfig">
    <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>
  </el-table-select>
</template>

设置回显数据

<script setup lang="ts">
const initValue = ref()
const initValue2 = ref()

const setInitValue = () => {
  /* 模拟接口响应 */
  setTimeout(() => {
    // 单选
    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' }
    ]
  }, 300)
}
</script>

<template>
  <!-- 将获取到的数据传入组件 -->
  <el-table-select :init-value="initValue">
</template>

属性

参数	说明	类型	默认值	可选值
modelValue	v-model	String
placeholder	提示文字	String	请选择
multiple	是否多选	Boolean	false	false
disabled	是否禁用	Boolean	false	true
size	尺寸大小	String	default	large,default,small
clearable	是否支持清除	Boolean	true	false
valueKey	value 的属性名	String	id
labelKey	label 的属性名	String	name
initValue	回显数据	Object
placement	popper 位置	String		详见 el-popover 位置
popperWidth	popper 宽度	String	560px
popperClass	popper 类名	String
popperOptions	popper 选项	Object	bottom	详见 el-popover 位置
tableConfig	表格配置	TableConfig[]
tagType	多选显示 tag 类型	String	info	详见 el-tag 类型
maxTagCount	显示 tag 数量	Number	5
transformData	自定义数据转换方法	Function

TableConfig

参数	说明	类型	默认值	可选值
column	表格列配置	TableColumn[]
request	表格数据	Function
pageSize	每页显示条数	Number

TableColumn

参数	说明	类型	默认值	可选值
type	类型	String
field	列名	String
title	标题	String
width	表格宽度	String
align	对齐方式	String
slot	插槽	String

事件

名称	说明	返回值
clear	清除按钮点击事件
item-clear	多选单个清除事件	改变后的值
focus	获取焦点事件	e
blur	失去焦点事件	e
change	值改变事件	改变后的值

插槽

名称	说明	参数
top-extra	表格头部插槽
bottom-extra	表格底部插槽