简介

可以用于接口列表数据展示，以及静态数据展示

基础用法

<mb-table ref="table" v-bind="tableOptions" />

const tableOptions = reactive({
  id: 'dict-list',
  url: '/system/dict/list',
  page: true,
  where: {
    type: {
      label: '类型'
    },
    dictType: {
      component: 'select',
      label: '字典类型',
      props: {
        'all-option': true,
        type: 'dict_type'
      }
    }
  },
  cols: [
    {
      field: 'type',
      label: '类型'
    },
    {
      field: 'descRibe',
      label: '描述'
    },
    {
      field: 'dictType',
      label: '字典类型',
      width: 200,
      dictType: 'dict_type'
    },
    {
      field: 'createDate',
      label: '创建时间'
    },
    {
      field: 'remarks',
      label: '备注',
      width: 200
    },
    {
      label: '操作',
      type: 'buttons',
      width: 220,
      fixed: 'right',
      buttons: [
        {
          permission: 'dict:save',
          label: '修改',
          link: true,
          click: (row) => {
            
          }
        },
        {
          permission: 'dict:delete',
          label: '删除',
          link: true,
          click: (row) => {
            
          }
        },
        {
          permission: 'dict:items:view',
          label: '字典项',
          link: true,
          click: (row) => {
            
          }
        }
      ]
    }
  ]
})

table props

名称	类型	默认值	说明	版本
props	Object	{}	n-table的属性
id	String	''	表格唯一标识，可以应用于保存表格参数到后台的场景
rowKey	String	'id'	表格数据的主键
nowrap	Boolean	true	单元格内容是否换行
virtualScroll	Boolean	false	虚拟滚动
url	String	''	请求数据URL，比如：'/system/dict/list'
where	Object	{}	详见mb-search where
cols	Array	[]	详见cols
summary	Object	undefined	详见summary
method	'get' | 'post' | 'postJson'	post	请求方法
limit	Number	10	分页条数
page	Boolean	true	是否分页
data	Array	null	静态数据和url属性二选一
done	(data) => void	undefined	数据加载后回调方法
loading	Boolean	true	表格是否开启loading
showNo	Boolean	true	是否开启序号
selection	Boolean	false	是否开启多选
striped	Boolean	true	斑马纹
selectedRowEnable	Boolean	true	是否开启行点击
contextmenuEnable	Boolean	false	是否开启右键菜单
defaultSelectedRow	Boolean	false	数据加载完成后是否选择第一行
defaultColWidth	Number	100	单元格默认宽度
checkedRowKeys	Array	[]	多选的keys
keepCurrentPage	Boolean	false	数据重新加载后，是否保持在当前页数
onScroll	(e) => void	undefined	表格滚动回调
onContextmenu	(e, row) => void	undefined	右键菜单回调
onDynamicSettingContextmenu	(row) => Array	undefined	右键菜单自定义项 return{key:'',title:'',row:null,click:() => {},icon:$common.renderIcon('')}
onContextmenuSelect	(key) => void	undefined	右键菜单项选择回调
onDblclick	({e, row}) => void	undefined	双击行回调

table cols props

名称	类型	默认值	说明	版本
type	String	text	更多详见type
field	String	undefined	字段名
label	String	undefined	标题名
align	'left' | 'right' | 'center'	left	列内的文本排列
permission	String	undefined	根据当前用户所有权限标识判断列是否显示
width	Number	undefined	宽度，单位：px
minWidth	Number	undefined	最小宽度，单位：px
fixed	'left | 'right' | false	false	该列是否需要 fixed 注意： 1、如果你想固定第三列那么前两列也需要固定 2、如果你想固定倒数第三列那么倒数第二和第一也需要固定
show	Boolean	true	是否显示此列
copyAll	Boolean	false	是否开启复制整列
copyAllCallback	(col) => void	undefined	点击复制整列回调，默认使用\n隔开
realSort	Boolean	false	是否开启后台排序，开启后请求后台会自动传入两个参数 1、orderByColumn（排序字段），为空时不排序 2、direction（排序规则），0升序、1倒序、为空时不排序
dictType	String	undefined	字典类型，配置后会根据此类型反显 支持按path获取值
templet	(row, col, index) => String	undefined	自定义返回内容
render	(row, rowIndex) => VNodeChild	undefined	自定义渲染内容
if	(row) => Boolean	undefined	根据行数据判断此列是否显示
titleTooltip	String | Object	undefined	表头提示。可以直接写字符串，也可以配置其他属性
titleTooltip.iconProps	Object	undefined	mb-icon的属性
titleTooltip.content	String	undefined	提示内容
summary	Boolean | Object	undefined	合计。可以直接配置true和false，也可以配置其他属性
summary.prefix	String	undefined	合计前缀，比如可以增加“￥”
summary.suffix	String	undefined	合计后缀

table cols type props

名称	说明	示例	版本
text	显示文本，支持按path获取值	{type: 'user.name'}
switch	开关	{type: 'switch', change: '值改变时回调' checkedValue: '选中的值', uncheckedValue: '取消选中的值', props: 'mb-switch的props'}
html	显示HTML，支持按path获取值	{type: 'user.name'}
buttons	按钮组	{type: 'buttons', buttons: [{}]}详情见buttons
dynamic	自定义插槽，插槽名=col.field，参数：row、col、index
image	显示图片，值是相对地址。自动补全前缀

table cols type buttons props

名称	类型	默认值	说明	版本
if	(row) => Boolean	undefined	判断按钮是否显示
permission	String	undefined	根据当前用户所有权限标识判断按钮是否显示
type	'dynamic' | 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'	default	按钮的类型，设置dynamic时表示自定义使用插槽
link	Boolean	false	是否显示为文本按钮
dashed	Boolean	false	按钮边框是否为虚线
color	String	undefined	按钮颜色（支持形如 #FFF， #FFFFFF， yellow，rgb(0, 0, 0) 的颜色）
tag	String	button	按钮需要被渲染为什么标签，如果link=true，是a标签否则是button
text-color	String	undefined	按钮文字颜色（支持形如 #FFF， #FFFFFF， yellow，rgb(0, 0, 0) 的颜色）
href	String	undefined	当tag是a标签可以配置此属性
target	String	undefined	当tag是a标签可以配置此属性
click	(row) => void	undefined	按钮点击时的回调
icon	String	undefined	mb-icon的icon属性

table summary props

名称	类型	默认值	说明	版本
url	String	undefined	请求数据url，默认get请求。返回的数据示例：{amount: 100}
method	String	undefined	请求方法
data	Object	undefined	合计数据和url二选一，数据示例：{amount: 100, amount2: { value: h('font', { color: 'red' }, 300) }}

常见问题

表格不显示？

<div>
    <mb-table v-bind="tableOptions" />
</div>

答：mb-table的父级标签或者本身，需要设置高度才可以。mb-table的高度可以根据父级标签高度自动填满。