Skip to content

SelectTableCombo

组合使用 select 框,table 气泡弹框。

案例代码

vue
<script setup lang="ts">
  import SelectTableCombo from '@/components/SelectTableCombo/index.vue'
  import { reactive, ref } from 'vue'

  const data = ref({})
  const tablePopVisible = ref(false)

  const tableOpts = reactive({
    // 表格的数据
    data: [],
    // 参考 element plus 的 table-column 属性
    columns: [
      { prop: 'companyName', label: '公司名称' },
      { prop: 'companyDepartmentName', label: '部门名称' },
      { prop: 'companyPersonCode', label: '人员工号' },
      { prop: 'companyPersonName', label: '人员姓名' }
    ],
    // 分页器的总数,一般接口会返回
    total: 0,
    // 表格的最大高度,超出会滚动
    maxHeight: '400px',
    // 如果 multi 为 ture, 必须拥有此项
    rawProps: {
      rowKey: 'companyPersonCode'
    }
  })

  function apiGetTableData(query) {
    return new Promise(res => {
      res([
        {
          companyName: '公司1',
          companyDepartmentName: '部门1',
          companyPersonCode: '1001',
          companyPersonName: '张三'
        },
        {
          companyName: '公司2',
          companyDepartmentName: '部门2',
          companyPersonCode: '1002',
          companyPersonName: '李四'
        },
        {
          companyName: '公司3',
          companyDepartmentName: '部门3',
          companyPersonCode: '1003',
          companyPersonName: '王五'
        },
        {
          companyName: '公司4',
          companyDepartmentName: '部门4',
          companyPersonCode: '1004',
          companyPersonName: '赵六'
        }
      ])
    })
  }

  const queryTableData = (query: any) => {
    console.log('这里是搜索内容', query)
    // 搜索内容如下
    //    {
    //      "pageSize": 10,
    //      "pageIndex": 1,
    //      "queryText": ""
    //    }
    apiGetTableData(query).then(res => {
      tableOpts.data = res
      tableOpts.total = res.length
    })
  }
</script>

<template>
  <select-table-combo
    v-model:data="data"
    v-model:visible="tablePopVisible"
    :opts="tableOpts"
    row-prop="companyPersonName"
    :multi="false"
    @refresh="queryTableData"
  />
</template>

<style lang="scss" scoped></style>

属性

名称类型描述默认可选
optsTableComboOpts表格的合并数据必填
propstring | funciton用于输入框的展示字段, 选中表格后需要展示在输入框上的字段。
例如,如果传入的表格数据为一维数组,也可以使用函数
可选
rowPropstring用于表格数据的 prop 过滤字段
例如: 输入框请求回来的数据
一般而言如果后端数据字段规范则用不到此配置项
可选
multiboolean是否为多选表格true
visibleboolean控制多选框的显示false必填
dataany需要获取的数据必填

事件

名称描述参数
refresh用于刷新表格数据,一般传入表格数据接口即可TableComboQueryParams

插槽

未添加