芋道-低代码

Appearance

快速开始 ​

视频教程 ​

TBD

第一步：导入组件 ​

查询器Table组件文件 querier-table/index.vue

typescript

import QuerierTable from '@/views/lowcode/components//querier-table/index.vue'

第二步：配置提示文（可选） ​

typescript
// 提示区文本配置
const helps = ref<QuerierTableHelpTextProps[]>([{ content: '提示文本1' }, { content: '提示文本2' }])

第三步：配置查询区 ​

typescript
// 查询区配置
const searchs = ref<QuerierTableSearchFieldProps[]>([
  {
    label: '目录名',
    helps: '目录名查询条件帮助提示',
    prop: 'name',
    span: 6,
    symbolType: 'EQ',
    inputType: 'input',
    placeholder: '请输入用户名'
  }
])

第四步：配置表格列 ​

typescript
// 表格列配置
const columns = ref<QuerierTableBodyColumnProps[]>([
  {
    label: '主键',
    rowKey: true,
    prop: 'id'
  },
  {
    label: '目录名',
    prop: 'name'
  },
  {
    label: '操作',
    columnType: 'action'
  }
])

第五步：配置行操作 ​

typescript
// 行操作配置
const rowActions = ref<ActionButtonProps[]>([
  {
    label: '查看',
    type: 'primary',
    onClick: (row: any) => {
      message.success(`查看${JSON.stringify(row)}`)
    }
  },
  {
    label: '编辑',
    type: 'warning',
    onClick: (row: any) => {
      message.success(`编辑${row}`)
    }
  }
])

第六步：配置查询接口 ​

typescript
// 数据加载函数
const loadData = async (data: QueryDomainParams) => {
  return await requestOriginal({
    method: 'post',
    url: '/lowcode/deploy-api/lowcode-media-dir/select-page',
    data
  })
}

第七步：使用组件 ​

vue
  <QuerierTable
    :helps="helps"
    :searchs="searchs"
    :columns="columns"
    :row-actions="rowActions"
    :loadData="loadData"
  />

完整文件 ​

vue
<template>
  <QuerierTable
    :helps="helps"
    :searchs="searchs"
    :columns="columns"
    :row-actions="rowActions"
    :loadData="loadData"
  />
</template>
<script lang="ts" setup>
import { requestOriginal } from '@/api/lowcode/utils'
import QuerierTable from '@/views/lowcode/components//querier-table/index.vue'
import {
  QuerierTableBodyColumnProps,
  QuerierTableHelpTextProps,
  QuerierTableSearchFieldProps,
  QueryDomainParams
} from '@/views/lowcode/components/querier-table/querier-table.type'
import { ActionButtonProps } from '@/views/lowcode/components/common/ActionButton.vue'

const message = useMessage()

// 提示区文本配置
const helps = ref<QuerierTableHelpTextProps[]>([{ content: '提示文本1' }, { content: '提示文本2' }])

// 查询区配置
const searchs = ref<QuerierTableSearchFieldProps[]>([
  {
    label: '目录名',
    helps: '目录名查询条件帮助提示',
    prop: 'name',
    span: 6,
    symbolType: 'EQ',
    inputType: 'input',
    placeholder: '请输入用户名'
  }
])

// 表格列配置
const columns = ref<QuerierTableBodyColumnProps[]>([
  {
    label: '主键',
    rowKey: true,
    prop: 'id'
  },
  {
    label: '目录名',
    prop: 'name'
  },
  {
    label: '操作',
    columnType: 'action'
  }
])

// 行操作配置
const rowActions = ref<ActionButtonProps[]>([
  {
    label: '查看',
    type: 'primary',
    onClick: (row: any) => {
      message.success(`查看${JSON.stringify(row)}`)
    }
  },
  {
    label: '编辑',
    type: 'warning',
    onClick: (row: any) => {
      message.success(`编辑${row}`)
    }
  }
])

// 数据加载函数
const loadData = async (data: QueryDomainParams) => {
  return await requestOriginal({
    method: 'post',
    url: '/lowcode/deploy-api/lowcode-media-dir/select-page',
    data
  })
}
</script>