编写版本：v1.2.1
适用版本：v1.2.0+
前置条件：使用的工程需在 Webpack5 版本以上，并使用模块联邦（ModuleFederationPlugin）接入 ui-base-core 项目提供的共享组件

共享组件-列表

一、 效果图

二、 组件路径

baseCore/core-list.vue

源码：ui-base-core/src/components/core-list/index.vue

三、 使用举例

template

<template>
    <List
          pk-key="assetId"
          class="data-asset-search-list"
          border
          :data="listData"
          :columns="columns"
          :pagination="pagination"
          size="default"
          :selection="false"
          :row-handle="rowHandle"
          :row-handle-width="120"
          @action-event="handleActionEvents"
          @size-change="handleSizeChange"
          @current-change="handleCurrentPageChange"
          @selection-change="handleSelectionChange"
        >
          <template #assetType="scope">
            <el-tag :disable-transitions="true" :size="size">{{ getAssetType(scope.row) }}</el-tag>
          </template>
          <template #applyStatus="scope">
            <span>{{ getAssetApplyStatus(scope.row) }}</span>
          </template>
        </List>
</template>

script

import List from 'baseCore/core-list.vue'
......
const listData = []

/**
 * 列表数据加载
 */
function loadListData() {
    ...
}

/**
 * 列定义
 */
const columns = [
  { prop: 'assetName', label: '资产名称', width: 200 },
  { prop: 'assetType', label: '资产来源', width: 100, slotName: 'assetType' },
  { prop: 'dbName', label: '所属库' },
  { prop: 'dbType', label: '数据库类型' },
  { prop: 'assetStatus', label: '资产状态', slotName: 'assetStatus', width: 90 },
  ...
]

/**
 * 分页参数（为空时则不显示分页栏）
 */
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

/**
 * 数据操作列定义
 */
const rowHandle = computed(() => {
  const handle = [
    { type: 'primary', label: '查看详情', key: 'detail' },
    { type: 'primary', label: '申请', key: 'apply', hide: (row) => {
      const applyStatus = row.applyStatus
      ...
      // 动态隐藏按钮逻辑
      ...
      return true
    } }
  ]
  return handle
})

/**
 * 操作列点击事件
 */
const handleActionEvents = (scope, key) => {
    // 点击事件处理
    const rows = Array.isArray(scope.row) ? scope.row : [scope.row]
    switch (key) {
        case 'register':
          emits('register', rows)
          break
        case 'delete':
          emits('asset-delete', rows[0])
          break
        default:
          break
      }
}

/**
 * 当前页处理
 */
const handleCurrentPageChange = (val) => {
  pagination.value.currentPage = val
  // 执行加载数据方法
  loadListData()
}

/**
 * 分页总数处理
 */
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  // 执行加载数据方法
  loadListData()
}

/**
 * 分页选择处理
 */
const handleSelectionChange = (val) => {
  selectionData.value = val
}
 ......

四、 组件API

属性

事件

插槽