SuperUiPlus基础组件文档

主题

SelectTable ​

示例 ​

基本使用 ​

<template>
  <div>
    <SuperSelectTable
      v-model="value"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
    ></SuperSelectTable>
    <div>value: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref();

const data = [
  { id: '1', name: '张三1', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '2', name: '张三2', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '3', name: '张三3', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '4', name: '张三4', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '5', name: '张三5', idCard: '110101199001011234', email: '<EMAIL>' },
]

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]
</script>

禁用状态 ​

<template>
  <div>
    <SuperSelectTable
      v-model="value"
      :columns="columns"
      :data="data"
      disabled
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
    ></SuperSelectTable>
    <div>value: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref();

const data = [
  { id: '1', name: '张三1', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '2', name: '张三2', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '3', name: '张三3', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '4', name: '张三4', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '5', name: '张三5', idCard: '110101199001011234', email: '<EMAIL>' },
]

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]
</script>

隐藏分页 ​

<template>
  <div>
    <SuperSelectTable
      v-model="value"
      :columns="columns"
      :data="data"
      :pagination="false"
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
    ></SuperSelectTable>
    <div>value: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref();

const data = [
  { id: '1', name: '张三1', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '2', name: '张三2', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '3', name: '张三3', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '4', name: '张三4', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '5', name: '张三5', idCard: '110101199001011234', email: '<EMAIL>' },
]

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]
</script>

模拟数据网络请求 ​

<template>
  <div>
    <SuperSelectTable
      v-model="value"
      :columns="columns"
      :requestApi="getData"
      :dataCallback="dataCallback"
      height="300px"
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
      tableWidth="600px"
    ></SuperSelectTable>
    <div>value: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref();

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]

const data: any[] = []
Array.from({ length: 10 }).forEach((item, index) => {
  data.push({
    id: String(index + 1),
    name: '张三' + index,
    idCard: '110101199001011234',
    email: '<EMAIL>',
  })
})

const getData = (param: any) => {
  // 第一种：接口返回正确的数据格式
  // return new Promise((resolve) => {
  //   setTimeout(() => {
  //     resolve({ data: { list: data, total: data.length } })
  //   }, 1000)
  // })

  // 第二种：使用回调函数返回正常的数据格式
  if (param.name) {
    const filterData = data.filter(item => item.name.includes(param.name))
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ data: { listData: filterData, totalNumber: filterData.length } })
      }, 1000)
    })
  }

  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: { listData: data, totalNumber: 11 } })
    }, 1000)
  })
}

// 修正数据格式
const dataCallback = (data: any) => {
  return { list: data.listData, total: data.totalNumber }
}
</script>

默认值 ​

<template>
  <div>
    <div>普通单选: {{ staticValue1 }}</div>
    <SuperSelectTable
      v-model="staticValue1"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
    ></SuperSelectTable>
    <div>带单选框(isRadio): {{ staticValue2 }}</div>
    <SuperSelectTable
      v-model="staticValue2"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      isRadio
      selectWidth="200px"
    ></SuperSelectTable>
    <div>多选(multiple): {{ staticValue3 }}</div>
    <SuperSelectTable
      v-model="staticValue3"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      multiple
      selectWidth="200px"
    ></SuperSelectTable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const staticValue1 = ref({ name: '张三12', id: '12' })
const staticValue2 = ref({ name: '张三12', id: '12' })
const staticValue3 = ref([
  { name: '张三1', id: '1' },
  { name: '张三12', id: '12' },
  { name: '张三23', id: '23' },
])

const data: Array<any> = []
Array.from({ length: 50 }).forEach((item, index) => {
  data.push({
    id: String(index + 1),
    name: '张三' + index,
    idCard: '110101199001011234',
    email: '<EMAIL>',
  })
})

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]
</script>

动态赋值 ​

<template>
  <div>
    <el-button @click="dynamicValue1 = { name: '张三1', id: '1' }">动态赋值1</el-button>
    <div>普通单选: {{ dynamicValue1 }}</div>
    <SuperSelectTable
      v-model="dynamicValue1"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
    ></SuperSelectTable>
        <el-button @click="dynamicValue2 = { name: '张三1', id: '1' }">动态赋值2</el-button>
    <div>带单选框(isRadio): {{ dynamicValue2 }}</div>
    <SuperSelectTable
      v-model="dynamicValue2"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      isRadio
      selectWidth="200px"
    ></SuperSelectTable>
    <el-button
      @click="
        dynamicValue3 = [
          { name: '张三1', id: '1' },
          { name: '张三2', id: '2' },
          { name: '张三3', id: '3' },
        ]
      "
    >
      动态赋值3
    </el-button>
    <div>多选(multiple): {{ dynamicValue3 }}</div>
    <SuperSelectTable
      v-model="dynamicValue3"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      multiple
      selectWidth="200px"
    ></SuperSelectTable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const dynamicValue1 = ref()
const dynamicValue2 = ref()
const dynamicValue3 = ref()

const data: Array<any> = []
Array.from({ length: 50 }).forEach((item, index) => {
  data.push({
    id: String(index + 1),
    name: '张三' + index,
    idCard: '110101199001011234',
    email: '<EMAIL>',
  })
})

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]
</script>

显示搜索条件 ​

<template>
  <div>
    <SuperSelectTable
      v-model="valuesSearch"
      :field="field"
      showSearch
      :columns="columns"
      :requestApi="getData"
      :dataCallback="dataCallback"
      height="300px"
      valueKey="id"
      labelKey="name"
      selectWidth="200px"
      tableWidth="600px"
    ></SuperSelectTable>
    <div>valuesSearch: {{ valuesSearch }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const valuesSearch = ref()
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    componentProps: {
      placeholder: '请输入姓名',
      clearable: true,
    },
    span: 2,
  },
]

const data: Array<any> = Array.from({ length: 10 }).map((item, index) => ({
  id: String(index + 1),
  name: '张三' + index,
  idCard: '110101199001011234',
  email: '<EMAIL>',
}))



const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]

const getData = (param: any) => {
  // 第一种：接口返回正确的数据格式
  // return new Promise((resolve) => {
  //   setTimeout(() => {
  //     resolve({ data: { list: data, total: data.length } })
  //   }, 1000)
  // })

  // 第二种：使用回调函数返回正常的数据格式
  if (param.name) {
    const filterData = data.filter(item => item.name.includes(param.name))
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ data: { listData: filterData, totalNumber: filterData.length } })
      }, 1000)
    })
  }

  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: { listData: data, totalNumber: data.length } })
    }, 1000)
  })
}

// 修正数据格式
const dataCallback = (data: any) => {
  return { list: data.listData, total: data.totalNumber }
}
</script>

键盘上下键选中数据 ​

<template>
  <div>
    <SuperSelectTable
      v-model="KeyupValue"
      :columns="columns"
      :data="data"
      valueKey="id"
      labelKey="name"
      isRadio
      isKeyup
      selectWidth="200px"
    ></SuperSelectTable>
    <div>KeyupValue: {{ KeyupValue }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const KeyupValue = ref();

const data = [
  { id: '1', name: '张三1', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '2', name: '张三2', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '3', name: '张三3', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '4', name: '张三4', idCard: '110101199001011234', email: '<EMAIL>' },
  { id: '5', name: '张三5', idCard: '110101199001011234', email: '<EMAIL>' },
]

const columns = [
  { prop: '$index', label: '序号', width: 80 },
  { prop: 'idCard', label: '身份证号', copyable: true },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
]
</script>

API ​

TIP

在el-select基础上开发，更多属性参考el-select

Select Props ​

参数说明类型可选值默认值
modelValue绑定值any --
labelKey自定义label字段属性名string-label
valueKey自定义value字段属性名string-value
multiple是否多选booleantrue | falsefalse
selectWidth选择框宽度string-550px
isRadio是否显示单选框boolean-false
isKeyup是否开启键盘上下键选择(仅在 isRadio 为 true 时生效)boolean-false
disabled是否禁用boolean | ((item: any) => boolean)--

ProTable Props ​

参数说明类型可选值默认值
tableWidth表格宽度string-550px
height表格高度string | number--
columns列配置项ColumnProps[]--
data静态 table data 数据(any[] | undefined | null)--
requestApi请求表格数据的 api ==> 非必传(params: any) => Promise<any>--
dataCallback返回数据的回调函数，可以对数据进行处理(data: any) => any--
pagination是否需要分页组件booleantrue/falsetrue
initParam初始化请求参数object--
showSearch是否显示搜索模块booleantrue/falsefalse
field表单配置列formGridItemProps[]-[]
layout分页组件布局string-'total, prev, pager, next'

Slots ​

插槽名说明
labelselect 组件自定义标签内容
tag自定义标签tag内容