MG Design

Appearance

Table 表格 ​

展示行列数据，基于 el-table 封装，API 完全兼容，默认插槽放置 el-table-column。

基础用法 ​

查看代码
vue
<script setup>
const tableData = [
  { name: '张三', age: 20, city: '北京' },
  { name: '李四', age: 25, city: '上海' },
]
</script>

<template>
  <MgTable :data="tableData">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
  </MgTable>
</template>

带边框 ​

查看代码
vue
<template>
  <MgTable :data="tableData" border>
    <el-table-column prop="name" label="姓名" />
  </MgTable>
</template>

带斑马纹 ​

查看代码
vue
<template>
  <MgTable :data="tableData" stripe>
    <el-table-column prop="name" label="姓名" />
  </MgTable>
</template>

Attributes ​

继承 Element Plus Table 的全部 Attributes。

参数说明类型默认值
data数据源array-
border纵向边框booleanfalse
stripe斑马纹booleanfalse
height高度string | number-
row-key行 keystring | function-

差异 ​

MgTable 追加 .mg-table 类名；默认插槽放置 el-table-column，与 el-table 用法一致。