ssPlus基础组件文档

Appearance

Return to top
On this page

下拉选择表格组件

基础用法

在组件中需配置：
table 数据源及表头信息
keywords 选项中的 value（选项的值）,label(选项的标签)
@radioChange 选中事件，传出当前选中对象
<template>
  <t-select-table
    :table="table"
    :columns="table.columns"
    :max-height="400"
    :keywords="{ label: 'name', value: 'id' }"
    @radioChange="radioChange"
  ></t-select-table>
</template>
<script setup lang="ts">
const table = {
  data: [
    { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
    { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
    { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
    { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
    { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
    { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
    { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
    { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
    { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
    {
      id: 10,
      code: 10,
      name: '物料名称10',
      spec: '物料规格10',
      unitName: '吨',
    },
    {
      id: 11,
      code: 11,
      name: '物料名称11',
      spec: '物料规格11',
      unitName: '吨',
    },
    {
      id: 12,
      code: 12,
      name: '物料名称12',
      spec: '物料规格12',
      unitName: '吨',
    },
    {
      id: 13,
      code: 13,
      name: '物料名称13',
      spec: '物料规格13',
      unitName: '吨',
    },
  ],
  columns: [
    { label: '物料编号', width: '100px', prop: 'code' },
    { label: '物料名称', width: '149px', prop: 'name' },
    { label: '规格', width: '149px', prop: 'spec' },
    { label: '单位', width: '110px', prop: 'unitName' },
    { label: '物料编号1', width: '149px', prop: 'code' },
    { label: '物料名称1', width: '149px', prop: 'name' },
    { label: '规格1', width: '149px', prop: 'spec' },
    { label: '单位1', width: '110px', prop: 'unitName' },
    { label: '物料编号11', width: '149px', prop: 'code' },
    { label: '物料名称11', width: '149px', prop: 'name' },
    { label: '规格11', width: '149px', prop: 'spec' },
    { label: '单位11', width: '110px', prop: 'unitName' },
    { label: '物料编号111', width: '149px', prop: 'code' },
    { label: '物料名称111', width: '149px', prop: 'name' },
    { label: '规格111', width: '149px', prop: 'spec' },
    { label: '单位111', width: '110px', prop: 'unitName' },
  ],
}
const radioChange = (row) => {
  console.log('单选--传给后台的值', row)
}
</script>

<template>
  <t-select-table
    :table="table"
    :columns="table.columns"
    :max-height="400"
    :keywords="{ label: 'name', value: 'id' }"
    @radioChange="radioChange"
  ></t-select-table>
</template>
<script setup lang="ts">
const table = {
  data: [
    { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
    { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
    { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
    { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
    { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
    { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
    { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
    { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
    { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
    {
      id: 10,
      code: 10,
      name: '物料名称10',
      spec: '物料规格10',
      unitName: '吨',
    },
    {
      id: 11,
      code: 11,
      name: '物料名称11',
      spec: '物料规格11',
      unitName: '吨',
    },
    {
      id: 12,
      code: 12,
      name: '物料名称12',
      spec: '物料规格12',
      unitName: '吨',
    },
    {
      id: 13,
      code: 13,
      name: '物料名称13',
      spec: '物料规格13',
      unitName: '吨',
    },
  ],
  columns: [
    { label: '物料编号', width: '100px', prop: 'code' },
    { label: '物料名称', width: '149px', prop: 'name' },
    { label: '规格', width: '149px', prop: 'spec' },
    { label: '单位', width: '110px', prop: 'unitName' },
    { label: '物料编号1', width: '149px', prop: 'code' },
    { label: '物料名称1', width: '149px', prop: 'name' },
    { label: '规格1', width: '149px', prop: 'spec' },
    { label: '单位1', width: '110px', prop: 'unitName' },
    { label: '物料编号11', width: '149px', prop: 'code' },
    { label: '物料名称11', width: '149px', prop: 'name' },
    { label: '规格11', width: '149px', prop: 'spec' },
    { label: '单位11', width: '110px', prop: 'unitName' },
    { label: '物料编号111', width: '149px', prop: 'code' },
    { label: '物料名称111', width: '149px', prop: 'name' },
    { label: '规格111', width: '149px', prop: 'spec' },
    { label: '单位111', width: '110px', prop: 'unitName' },
  ],
}
const radioChange = (row) => {
  console.log('单选--传给后台的值', row)
}
</script>

多选

在组件中需配置：
multiple 开启多选
table 数据源及表头信息
keywords 选项中的 value（选项的值）,label(选项的标签)
@selectionChange 多选事件，传出当前选中项，及选中项的 keywords.value 集合
<template>
  <t-select-table
    :table="table"
    :columns="table.columns"
    :max-height="400"
    :keywords="{ label: 'name', value: 'id' }"
    multiple
    @selectionChange="selectionChange"
  />
</template>
<script setup lang="ts">
let table = {
  total: 100,
  data: [
    { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
    { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
    { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
    { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
    { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
    { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
    { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
    { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
    { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
    {
      id: 10,
      code: 10,
      name: '物料名称10',
      spec: '物料规格10',
      unitName: '吨',
    },
    {
      id: 11,
      code: 11,
      name: '物料名称11',
      spec: '物料规格11',
      unitName: '吨',
    },
    {
      id: 12,
      code: 12,
      name: '物料名称12',
      spec: '物料规格12',
      unitName: '吨',
    },
    {
      id: 13,
      code: 13,
      name: '物料名称13',
      spec: '物料规格13',
      unitName: '吨',
    },
  ],
  columns: [
    { label: '物料编号', width: '100px', prop: 'code', fixed: true },
    { label: '物料名称', width: '149px', prop: 'name' },
    { label: '规格', width: '149px', prop: 'spec' },
    { label: '单位', width: '110px', prop: 'unitName' },
    { label: '物料编号1', width: '149px', prop: 'code' },
    { label: '物料名称1', width: '149px', prop: 'name' },
    { label: '规格1', width: '149px', prop: 'spec' },
    { label: '单位1', width: '110px', prop: 'unitName' },
    { label: '物料编号11', width: '149px', prop: 'code' },
    { label: '物料名称11', width: '149px', prop: 'name' },
    { label: '规格11', width: '149px', prop: 'spec' },
    { label: '单位11', width: '110px', prop: 'unitName' },
    { label: '物料编号111', width: '149px', prop: 'code' },
    { label: '物料名称111', width: '149px', prop: 'name' },
    { label: '规格111', width: '149px', prop: 'spec' },
    { label: '单位111', width: '110px', prop: 'unitName' },
  ],
}
const selectionChange = (val, ids) => {
  console.log('复选框', val)
  console.log('复选框--id', ids)
}
</script>

<template>
  <t-select-table
    :table="table"
    :columns="table.columns"
    :max-height="400"
    :keywords="{ label: 'name', value: 'id' }"
    multiple
    @selectionChange="selectionChange"
  />
</template>
<script setup lang="ts">
let table = {
  total: 100,
  data: [
    { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
    { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
    { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
    { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
    { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
    { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
    { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
    { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
    { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
    {
      id: 10,
      code: 10,
      name: '物料名称10',
      spec: '物料规格10',
      unitName: '吨',
    },
    {
      id: 11,
      code: 11,
      name: '物料名称11',
      spec: '物料规格11',
      unitName: '吨',
    },
    {
      id: 12,
      code: 12,
      name: '物料名称12',
      spec: '物料规格12',
      unitName: '吨',
    },
    {
      id: 13,
      code: 13,
      name: '物料名称13',
      spec: '物料规格13',
      unitName: '吨',
    },
  ],
  columns: [
    { label: '物料编号', width: '100px', prop: 'code', fixed: true },
    { label: '物料名称', width: '149px', prop: 'name' },
    { label: '规格', width: '149px', prop: 'spec' },
    { label: '单位', width: '110px', prop: 'unitName' },
    { label: '物料编号1', width: '149px', prop: 'code' },
    { label: '物料名称1', width: '149px', prop: 'name' },
    { label: '规格1', width: '149px', prop: 'spec' },
    { label: '单位1', width: '110px', prop: 'unitName' },
    { label: '物料编号11', width: '149px', prop: 'code' },
    { label: '物料名称11', width: '149px', prop: 'name' },
    { label: '规格11', width: '149px', prop: 'spec' },
    { label: '单位11', width: '110px', prop: 'unitName' },
    { label: '物料编号111', width: '149px', prop: 'code' },
    { label: '物料名称111', width: '149px', prop: 'name' },
    { label: '规格111', width: '149px', prop: 'spec' },
    { label: '单位111', width: '110px', prop: 'unitName' },
  ],
}
const selectionChange = (val, ids) => {
  console.log('复选框', val)
  console.log('复选框--id', ids)
}
</script>

开启分页功能

在组件中需配置：
isShowPagination 开启分页功能
@page-change页码改变事件;传出当前选中的页码
table 数据源及表头信息
keywords 选项中的 value（选项的值）,label(选项的标签)
<template>
  <t-select-table
    :table="table"
    :columns="table.columns"
    :max-height="400"
    :keywords="{ label: 'name', value: 'id' }"
    multiple
    @selectionChange="selectionChange"
    isShowPagination
    x
    @current-change="pageChange"
  />
</template>
<script setup lang="ts">
let table = {
  total: 100,
  data: [
    { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
    { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
    { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
    { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
    { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
    { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
    { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
    { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
    { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
    {
      id: 10,
      code: 10,
      name: '物料名称10',
      spec: '物料规格10',
      unitName: '吨',
    },
    {
      id: 11,
      code: 11,
      name: '物料名称11',
      spec: '物料规格11',
      unitName: '吨',
    },
    {
      id: 12,
      code: 12,
      name: '物料名称12',
      spec: '物料规格12',
      unitName: '吨',
    },
    {
      id: 13,
      code: 13,
      name: '物料名称13',
      spec: '物料规格13',
      unitName: '吨',
    },
  ],
  columns: [
    { label: '物料编号', width: '100px', prop: 'code', fixed: true },
    { label: '物料名称', width: '149px', prop: 'name' },
    { label: '规格', width: '149px', prop: 'spec' },
    { label: '单位', width: '110px', prop: 'unitName' },
    { label: '物料编号1', width: '149px', prop: 'code' },
    { label: '物料名称1', width: '149px', prop: 'name' },
    { label: '规格1', width: '149px', prop: 'spec' },
    { label: '单位1', width: '110px', prop: 'unitName' },
    { label: '物料编号11', width: '149px', prop: 'code' },
    { label: '物料名称11', width: '149px', prop: 'name' },
    { label: '规格11', width: '149px', prop: 'spec' },
    { label: '单位11', width: '110px', prop: 'unitName' },
    { label: '物料编号111', width: '149px', prop: 'code' },
    { label: '物料名称111', width: '149px', prop: 'name' },
    { label: '规格111', width: '149px', prop: 'spec' },
    { label: '单位111', width: '110px', prop: 'unitName' },
  ],
}
const selectionChange = (val, ids) => {
  console.log('复选框', val)
  console.log('复选框--id', ids)
}
// 获取当前的页码
const pageChange = (val) => {
  console.log('获取当前的页码', val)
  table.currentPage = val
}
</script>

<template>
  <t-select-table
    :table="table"
    :columns="table.columns"
    :max-height="400"
    :keywords="{ label: 'name', value: 'id' }"
    multiple
    @selectionChange="selectionChange"
    isShowPagination
    x
    @current-change="pageChange"
  />
</template>
<script setup lang="ts">
let table = {
  total: 100,
  data: [
    { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
    { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
    { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
    { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
    { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
    { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
    { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
    { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
    { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
    {
      id: 10,
      code: 10,
      name: '物料名称10',
      spec: '物料规格10',
      unitName: '吨',
    },
    {
      id: 11,
      code: 11,
      name: '物料名称11',
      spec: '物料规格11',
      unitName: '吨',
    },
    {
      id: 12,
      code: 12,
      name: '物料名称12',
      spec: '物料规格12',
      unitName: '吨',
    },
    {
      id: 13,
      code: 13,
      name: '物料名称13',
      spec: '物料规格13',
      unitName: '吨',
    },
  ],
  columns: [
    { label: '物料编号', width: '100px', prop: 'code', fixed: true },
    { label: '物料名称', width: '149px', prop: 'name' },
    { label: '规格', width: '149px', prop: 'spec' },
    { label: '单位', width: '110px', prop: 'unitName' },
    { label: '物料编号1', width: '149px', prop: 'code' },
    { label: '物料名称1', width: '149px', prop: 'name' },
    { label: '规格1', width: '149px', prop: 'spec' },
    { label: '单位1', width: '110px', prop: 'unitName' },
    { label: '物料编号11', width: '149px', prop: 'code' },
    { label: '物料名称11', width: '149px', prop: 'name' },
    { label: '规格11', width: '149px', prop: 'spec' },
    { label: '单位11', width: '110px', prop: 'unitName' },
    { label: '物料编号111', width: '149px', prop: 'code' },
    { label: '物料名称111', width: '149px', prop: 'name' },
    { label: '规格111', width: '149px', prop: 'spec' },
    { label: '单位111', width: '110px', prop: 'unitName' },
  ],
}
const selectionChange = (val, ids) => {
  console.log('复选框', val)
  console.log('复选框--id', ids)
}
// 获取当前的页码
const pageChange = (val) => {
  console.log('获取当前的页码', val)
  table.currentPage = val
}
</script>

TSelectTable 参数配置

1、代码示例

html
<t-select-table
  :table="table"
  :columns="table.columns"
  :max-height="400"
  :keywords="{ label: 'name', value: 'id' }"
  @radioChange="radioChange"
></t-select-table>

<t-select-table
  :table="table"
  :columns="table.columns"
  :max-height="400"
  :keywords="{ label: 'name', value: 'id' }"
  @radioChange="radioChange"
></t-select-table>

2、配置参数（Attributes）继承 el-table 及 el-select 属性

参数说明类型默认值
v-model绑定值boolean / string / number仅显示
table表格数据对象Object{}
---data展示下拉数据源Array[]
---total数据总条数Number-
---pageSize每页显示条目个数Number-
---currentPage当前页数Number-
columns表头信息Array[]
----bindel-table-column AttributesObject-
----noShowTip是否换行 （设置：noShowTip:true）Booleanfalse
----fixed列是否固定( left, right)string, boolean-
----align对齐方式(left/center/right)Stringcenter
----render返回三个参数(text：当前值,row：当前整条数据 ,index：当前行)function-
----slotName插槽显示此列数据（其值是具名作用域插槽）String-
------scope具名插槽获取此行数据必须用解构接收Object当前行数据
keywords关键字配置（value-key 配置）Object无
------label选项的标签String‘label’
------value选项的值String‘value’
radioTxt单选文案String单选
multiple是否开启多选Booleanfalse
isShowPagination开启分页Booleanfalse
tableWidthtable 宽度Number550

3、事件（events）继承 el-table 及 el-select 属性

事件名说明回调参数
page-change页码改变事件返回选中的页码
selectionChange多选事件返回选中的项数据及选中项的 keywords.value 集合
radioChange单选返回当前项所有数据

4、方法（Methods）继承 el-table 及 el-select 属性

方法名说明回调参数
focus使 input 获取焦点
blur使 input 失去焦点，并隐藏下拉框