Table 表格

基于 ElTable 封装，集成分页、多选、远程数据加载等功能。

基础用法

<template>
  <div>
    <div>isReload: {{ isReload }}</div>
    <div>selectKeys: {{ selectKeys }}</div>
    <MTable
      v-model:is-reload="isReload"
      v-model:select-keys="selectKeys"
      :columns="tableColumns"
      :data="userList"
      :http="getDemoUserList"
      :params="params"
    >
      <template #extra>
        <el-button v-auth="searchBtnPermission" @click="isReload = true"
          >重置</el-button
        >
        <el-button v-auth:tableSearch @click="params.q = 456"
          >params.q = 456</el-button
        >
        <el-button @click="setSelectKeys">选中id 1~10</el-button>
      </template>

      <template #createAt="{ value }">
        <span v-dateFormat:YYYY-MM-DD="value"></span>
      </template>
      <template #actions="{ row, index, value }">
        <el-button size="small" @click="viewDetails({ row, index, value })"
          >详情</el-button
        >
      </template>
    </MTable>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import readme from '@/components/table/README.md?raw'
import { ref, reactive } from 'vue'
import { tableColumns } from './config'
import { getDemoUserList } from '@/api/examples/user'

const isReload = ref(true)
const searchBtnPermission = ref('tableReset')

const userList = ref<any[]>(
  new Array(55).fill(0).map((_, index) => ({
    id: index + 1,
    name: index + 1
  }))
)

// selectKeys
const selectKeys = ref<any[]>([1, 3, 5])
const setSelectKeys = () => {
  selectKeys.value = new Array(10).fill(0).map((_, index) => index + 1)
}

// params
const params = reactive({
  q: 123
})

const viewDetails = (scope: any) => {
  console.log(scope)
}
</script>

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

列配置：

import type { TableColumn } from '@/components'

export const tableColumns: TableColumn[] = [
  {
    key: '用户信息',
    label: '用户信息',
    children: [
      {
        key: 'name',
        label: '姓名',
        width: 200
      },
      {
        key: 'address',
        label: '地区',
        width: 200
      },
      {
        key: 'email',
        label: '邮箱'
      }
    ]
  },
  {
    key: 'userInfo.origin',
    label: '来源',
    customRender: (val) => val && '来源: ' + val
  },
  {
    key: 'createAt',
    label: '创建日期',
    slot: true
  },
  {
    key: 'updateAt',
    label: '更新日期'
  },
  {
    key: 'actions',
    label: '操作',
    slot: true,
    fixed: 'right'
  }
]

API

Table 属性

属性名	说明	类型	默认值
series	显示序号列	boolean	true
columns	表格列配置	TableColumn[]	—
selectable	决定 CheckBox 是否可勾选	(row: any, index: number) => boolean	—
selectKeys	多选框 v-model	array	—
selectKeysKeep	切换页码时不根据 table 数据过滤 selectKeys	boolean	false
rowKey	行数据的 Key	string | ((row) => any)	'id'
paginationConfig	分页器配置，设为 false 关闭分页	false | TablePaginationOptions	—
loading	显示加载动画	boolean	—
data	静态数据（http 和 data 同时设置时使用 http）	array	[]
httpLazy	http 不立即执行，params 变化或 isReload=true 时调用	boolean	false
isReload	重新请求 http（v-model）	boolean	false
http	获取数据的接口	(params) => Promise<{data: [], count: number}>	—
params	http 额外参数	object	{}

TableColumn

属性名	说明	类型	默认值
key	唯一值	string	—
label	列标签	string	—
slot	开启 name=key 的插槽	boolean	false
width	列宽度	number	—
fixed	列固定	'left' | 'right'	—
attrs	ElTableColumn 属性	object	—
customRender	自定义渲染内容	(value, row, index) => string	—
children	多级表头	TableColumn[]	—

TablePaginationOptions

属性名	说明	类型	默认值
currentPage	当前页	number	1
pageSize	每页条数	number	10
pageSizes	每页条数可选项	number[]	[10, 20, 30]

Table 插槽

插槽名	说明
extra	额外内容，table 右上角，推荐用于放置操作按钮
[column key]	TableColumn slot 为 true 时开启