hero admin ui 组件库

table-card 表格卡片

表格卡片组件，是对 table 组件的二次封装，放置到卡片中，支持编辑模式和查看模式，便于快速开发详情页列表。

基本使用

view mode:

查看模式

表格卡片
aaa
aaa
Total 33
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
Go to 
<template>
  <div>
    <p>
      view mode: <el-switch v-model="viewMode" /> {{viewMode ? '查看' : '编辑'}}模式
    </p>
    <ha-table-card title="表格卡片"
                   :view-mode="viewMode"
                   :schema="demoSchema" :stripe="true" :border="true"
                   :ui-schema="uiSchema"
                   :data="demoData"
                   show-pagination="always"
                   :total="demoData.length"
                   :is-pseudo-paging="true"
                   :current-page="1"
                   :page-size="5"
                   height="300px"
                   :show-index="true"
                   selection-type="checkbox"
                   @current-change="onPageChange"
                   @size-change="onPageChange"
                   @selection-change="onSelectionChange"
                   :row-buttons="rowButtons"
                   @row-buttons-click="onRowButtonsClick"
                   :show-column-setting="true"
                   @opt-create-click="onOptCreateClick"
                   @opt-batch-delete-click="onOptBatchDeleteClick"
    >
      <template #opt>aaa</template>
    </ha-table-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Schema, UiSchema } from '../../../libs/components/types'
import demoJsonSchema, { demoTableData, demoUiSchema } from '../demo-json-schema'

const viewMode = ref(true)

const demoSchema = reactive<Schema>(demoJsonSchema)
const uiSchema = reactive<UiSchema>(demoUiSchema)
const demoData = reactive<any[]>(demoTableData)
const onPageChange = (page: {currentPage: number, pageSize: number}) => {
  console.log(`分页发生变化: ${page.currentPage}, ${page.pageSize}`)
}
const demoIndexMethod = (index: number) => {
  return index + 1
}
const onSelectionChange = (selection: any) => {
  console.log(selection)
}
const keyModify = Symbol('btn_modify')
const keyDelete = Symbol('btn_delete')
const keyView = Symbol('btn_view')
const rowButtons = (scope: any) => {
  if (scope.row.name === 'XXX - 0' || scope.row.name === 'XXX - 4') {
    return [
      { key: keyModify, label: '修改' },
      { key: keyView, label: '查看' }
    ]
  } else if (scope.row.name === 'XXX - 1') {
    return [
      { key: keyView, label: '查看' }
    ]
  }
  return [
    { key: keyModify, label: '修改' },
    { key: keyDelete, label: '删除' },
    { key: keyView, label: '查看' }
  ]
}
const onRowButtonsClick = (key: symbol, scope: any) => {
  if (key === keyModify) {
    console.log('修改', scope.row.name)
  } else if (key === keyDelete) {
    console.log('删除', scope.row.name)
  } else if (key === keyView) {
    console.log('查看', scope.row.name)
  }
}
const onOptBatchDeleteClick = (selectionList: any) => {
  console.log('批量删除', selectionList)
}
const onOptCreateClick = () => {
  console.log('新增')
}
</script>

<style scoped lang="scss">
</style>
显示代码

组件 API

Attributes 属性

参数说明类型可选值默认值

Methods 方法

方法名说明参数返回值

Events 事件

事件名说明参数返回值

Slots 插槽

插槽名说明参数